0

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:

  • Firefox 67.0.4 on Xubuntu 18.04
  • Firefox 68.0.1 on Windows 10

I had no problem on:

  • IE11 & Edge (not working at all :P)
  • Chrome 75 on Windows 10

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 ?)

5
  • 1
    I have the problem with all of them (codepen, jsfiddle and stackoverflow snippet) in firefox Jul 24, 2019 at 14:54
  • Please add your code tot he question. Jul 24, 2019 at 15:25
  • @BugsArePeopleToo What do you mean ?
    – sodimel
    Jul 24, 2019 at 15:31
  • Oops, i missed the snippet... Jul 24, 2019 at 15:34
  • I'm experiencing the same problem in Firefox 71, and noticed that the problem does exist on jsfiddle, but not on codepen. In addition to that, the iframe src url viewed by itself works properly: fiddle.jshell.net/32Lbvakx/show The surprising part is that the relevant code is still in an iframe.
    – Ryan
    Jan 8, 2020 at 23:12

1 Answer 1

2

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: codepen screenshot with large output area

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:

codepen screenshot with small output area

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.

4
  • 2
    I have filed a bug report on the firefox bugzilla: bugzilla.mozilla.org/show_bug.cgi?id=1608194
    – Ryan
    Jan 9, 2020 at 18:08
  • Wow, I never thought it could be a firefox bug! Thanks!
    – sodimel
    Jan 9, 2020 at 20:02
  • 1
    Happy to help. According to the helpful people at the bugzilla link above, it looks like this behavior is specifically tied to a bugfix from a couple years ago related to the "offscreen-throttling" feature. It can be disabled on a per-browser basis in the settings, but that won't help unknown site visitors.
    – Ryan
    Jan 9, 2020 at 21:09
  • Just adding a comment here to say that the bug was fixed 4 months ago (Apr 2020)!
    – sodimel
    Aug 31, 2020 at 12:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.