I'm encountering the same problem than the post Why CSS animation go smooth only if i am moving mouse pointer?, but only for stackoverflow snippets (codepen and jsfiddle are working fine).
Problem is present on:
I had no problem on:
Now time for the demos:
Here's the stackoverflow snippet (also made a video in case you are not able to reproduce the bug):
div{
width: 50px;
height: 50px;
display: flex;
justify-content: center;
border: 1px solid black;
}
span{
display: inline-block;
position: fixed;
}
span[data-id]::before{
opacity: 0;
line-height: 1;
font-size: 50px;
content: attr(data-id);
background-position: center;
animation: fade 4s linear calc(1s * var(--data-x)) infinite;
}
@keyframes fade{
25%{
opacity: 1;
}
50%{
opacity: 0;
}
}
<div>
<span data-id="1" style="--data-x:0"></span>
<span data-id="2" style="--data-x:1"></span>
<span data-id="3" style="--data-x:2"></span>
<span data-id="4" style="--data-x:3"></span>
</div>
Here's the jsfiddle link.
Here's the codepen link.
My question is:
Can you explain me why there is a problem on the execution of an animation when browsing a specific snippet with a specific browser ? (and are you able to reproduce this strange behaviour ?)
Firefox removes CSS animation priority completely from small iframes (tested on firefox 71 in Ubuntu).
Right now, the codepen example uses over half the available screen when square, and animates properly:
However, the codepen example stops animating without mouse movement as soon as the size of the iframe is less then half the size of the outer page:
If you resize the firefox window for codepen, you can actively see the effect of the animation halting as soon as the window size is too small. I don't see a bug on the firefox bugzilla on this specifically, but there are some bugs around animations in iframes that may be related.