Animation of multiple background image positions via keyframes fails in Firefox - CSS-Tricks

This topic is empty.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
July 3, 2014 at 7:16 pm #174536
Anonymous
Inactive
I’ve adapted my code after: https://css-tricks.com/parallax-background-css3/

Here’s my version (I’ll also paste it below): http://jsbin.com/cifig/1/

The goal is to create an infinitely scrolling, two-layer parallax background. The effect works perfectly in Mac Chrome and Safari, but it stutters in Firefox. Any ideas why? Thanks!
```
<style>

  body {
    background-color: black;
  }

  #container {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
  }

  @-webkit-keyframes scrollBg {
    100% { background-position: 0 0; }
  }

  @keyframes scrollBg {
    100% { background-position: 0 0; }
  }

  .shotsBg1 {
    width: 100%;
    height: 100%;
    position: fixed;
    background-image: url(http://shotseverybody.com/images/shot_tile.png);
    background-size: 128px 156px;
    background-position: 0 -156px;
    opacity: 0.5;
    -webkit-animation: scrollBg 2.5s linear infinite;
    animation: scrollBg 2.5s linear infinite;
  }

  .shotsBg2 {
    width: 100%;
    height: 100%;
    position: fixed;
    background-image: url(http://shotseverybody.com/images/shot_tile.png);
    background-size: 64px 78px;
    background-position: 0 -78px;
    opacity: 0.25;
    -webkit-animation: scrollBg 5s linear infinite;
    animation: scrollBg 5s linear infinite;
  }

</style>

<body>

  <div id="container">

    <div id="bg1" class="shotsBg1"></div>
    <div id="bg2" class="shotsBg2"></div>

  </div>

</body>
```
July 5, 2014 at 1:59 am #174667

Paulie_D
Member

As far as I know FF doesn’t require any prefixing for animatons (although it never hurts to add them in anyway)

http://caniuse.com/css-animation

July 6, 2014 at 7:11 pm #174851

Anonymous
Inactive

Thanks for your interest. My reading of caniuse.com was that the current version of Firefox wouldn’t require the Mozilla vendor prefix for @keyframes and animation (and David Walsh has a similar code at http://davidwalsh.name/multiple-background-css-animations that runs fine without it). I also tried adding -moz- to my program, but it made not difference. See: jsbin.com/cifig/2

July 6, 2014 at 10:43 pm #174854

wahhabb
Participant

Congratulations! You appear to have found a bug in Firefox.

I tried a variety of changes to see what led to the problem. I stopped scrolling the small glasses–no apparent improvement. Then I added background-repeat:no-repeat; to the small images. The large glasses scrolled smoothly! I tried background-repeat:repeat-y. If I make the window narrow enough, the large glasses scroll fairly smoothly, but if it has any width, they are somewhat jerky, although not as bad as with the no-repeat option. You might try reporting it. Apparently, you are not alone: see for example http://stackoverflow.com/questions/8937075/jquery-and-css-animations-choppy-in-firefox .
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

The forum ‘CSS’ is closed to new topics and replies.