This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

Animation of multiple background image positions via keyframes works in Chrome & Safari, not Firefox.

janaspage
janaspage
more options

The goal is to create an infinitely scrolling, two-layer parallax, patterned background. The effect works perfectly in Mac Chrome 35.0.1916.153, Mac Safari 7.0.4, iOS Chrome 35.0.1916.41, and iOS Safari 7.1.2, but it stutters in Mac Firefox 30.0 (haven't tested on iOS FF).

My code is visible at http://jsbin.com/cifig/2 and is basically modeled after http://davidwalsh.name/multiple-background-css-animations (demo http://davidwalsh.name/demo/multiple-background-css-animations.php).

If I make either one of the following changes, the stutter in FF resolves: • Limit `background-repeat` to `repeat-x` or to `repeat-y`. • Remove one of the two animated backgrounds.

So it seems FF can't handle the continuous animation of two backgrounds that each have background-repeat, whereas Chrome and Safari can.

Any tips? Thanks!

The goal is to create an infinitely scrolling, two-layer parallax, patterned background. The effect works perfectly in Mac Chrome 35.0.1916.153, Mac Safari 7.0.4, iOS Chrome 35.0.1916.41, and iOS Safari 7.1.2, but it stutters in Mac Firefox 30.0 (haven't tested on iOS FF). My code is visible at http://jsbin.com/cifig/2 and is basically modeled after http://davidwalsh.name/multiple-background-css-animations (demo http://davidwalsh.name/demo/multiple-background-css-animations.php). If I make either one of the following changes, the stutter in FF resolves: • Limit `background-repeat` to `repeat-x` or to `repeat-y`. • Remove one of the two animated backgrounds. So it seems FF can't handle the continuous animation of two backgrounds that each have background-repeat, whereas Chrome and Safari can. Any tips? Thanks!

All Replies (1)

the-edmeister
the-edmeister
  • Moderator
more options

Try posting at the Web Development / Standards Evangelism forum at MozillaZine. The helpers over there are more knowledgeable about web page development issues with Firefox.
http://forums.mozillazine.org/viewforum.php?f=25
You'll need to register and login to be able to post in that forum.