When (for example) positioning your image absolute the positioning can break when the image is loading using drimage.
This is because drimage uses a wrapper with a keyframe animation attached that is using the css filter & transform property.
This means we will loose the blur & growing animation in favour of a more stable baseline.
We can overwrite the animation used, using only properties that won't affect underlying positioning
In the drimage module 'drimage_loader.css'
.drimage.is-loading {
opacity: 0;
animation: color-change .45s ease-in-out forwards;
}
@keyframes color-change {
from {
opacity: 0;
filter: blur(8px);
transform: scale(0.95);
}
to {
opacity: 1;
filter: blur(0);
transform: scale(1);
}
}
Add the same in our basetheme, but then only apply the opacity change.
.drimage.is-loading {
animation: opacity-change .45s ease-in-out forwards;
}
@keyframes opacity-change {
from {
opacity: 0;
}
to {
opacity: 1;
}
}Closed: won't fix
3.0
Code
Since we stopped the development of this project since we moved to a starterkit theme, this will not be picked up.
The change has been added to the new theme, see https://git.drupalcode.org/project/rocketship_theme_starter/-/commit/f88...