Previously, I was experiencing a visual bug on an animated element:
Briefly, the final (bottom right) of four circles had a couple of flattened faces:
I found a workaround: add rotate(0deg) to one of the animation keyframes.
@keyframes shuffle {
0%, 95%, 100% {
transform: translate(0, 0) rotate(0deg); /* fixed! */
}
20%, 25% {
transform: translate(2.5rem, 0);
}
/* etc. */
}
Why does this work? I got the idea from this chromium bug discussion, but I don't really understand it (something about promoting it to its own layer/context).