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

Status: NEW

(Core :: Layout, defect)

Description

[u511259]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36

Steps to reproduce:

View the animation at http://jsbin.com/cifig/2 (code is visible under the "edit" button in the top-right corner). Code is basically modeled after http://davidwalsh.name/multiple-background-css-animations (demo http://davidwalsh.name/demo/multiple-background-css-animations.php).


Actual results:

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. 


Expected results:

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

Comment 1

[Milan Sreckovic [:milan] (needinfo for best results)]

Looking at http://davidwalsh.name/demo/multiple-background-css-animations.php, I see the bird, only moving left to right, and with Chrome, the frog goes up, the bird goes diagonally bottom-left to top-right.

Timothy, a guess if this be graphics or layout?

Comment 2

[Timothy Nikkel (:tnikkel)]

From the source of http://davidwalsh.name/demo/multiple-background-css-animations.php I see

		@keyframes animatedBird {
			from { background-position: 20px 20px, 30px 80px, 0 0; }
			to { background-position: 300px -90px, 30px 20px, 100% 0; }
		}
		@-webkit-keyframes animatedBird {
			from { background-position: 20px 20px, 30px 80px, 0 0; }
			to { background-position: 300px -90px, 30px 20px, 100% 0; }
		}
		@-ms-keyframes animatedBird {
			from { background-position: 20px 20px, 30px 80px, 0 0; }
			to { background-position: 300px -90px, 30px 20px, 100% 0; }
		}
		@-moz-keyframes animatedBird {
			from { background-position: 20px -90px, 30px 80px, 0 0; }
			to { background-position: 300px -90px, 30px 20px, 100% 0; }
		}

Note that the rules are all the same except for the moz prefixed one. So that explains why the bird goes left to right in Firebox, but diagonally in other browsers.

http://jsbin.com/cifig/2 is a 404 for me.

Is this bug about the animation working at all? Or stuttering?

Comment 3

[Milan Sreckovic [:milan] (needinfo for best results)]

Yeah, skip the jsbin.com... one, but look at http://davidwalsh.name/demo/multiple-background-css-animations.php  If you visit that page in Chrome, you will see two characters, and eventually clouds.  In Firefox, just one character.

Comment 4

[Timothy Nikkel (:tnikkel)]

(In reply to Milan Sreckovic [:milan] from comment #3)
> Yeah, skip the jsbin.com... one, but look at
> http://davidwalsh.name/demo/multiple-background-css-animations.php  If you
> visit that page in Chrome, you will see two characters, and eventually
> clouds.  In Firefox, just one character.

I see two characters (frog and bird) and the clouds in Firefox. The only difference I see from Chrome is that the bird in Chrome moves diagonally, whereas in Firefox it just moves left to right.

Comment 5

[Milan Sreckovic [:milan] (needinfo for best results)]

Seems to be intermittent, or perhaps something to do with the cache.  I just ran it in nightly, it didn't work.  I tried in Aurora, it didn't work (no frog) until the clouds showed up, and then it was OK.  As it was on re-opening the page, and even restarting Aurora.  Strange.

Comment 6

[u511259]

Hello. Thanks for your attention to this report. I apologize that I did not keep that JSBin. I've taken now a look at my Git log for that project, pulled what I think was the concerning commit, reduced that code to minimal, and created a new JSBin: 

http://jsbin.com/porujo/1/

Basically the problem appears to be that Firefox can't animate an overly complex background, whereas Chrome and Safari can. The overly complex background in this case is created via `background-repeat`, and the animation is executed via CSS3 `animation` of `keyframes` on the `background-position`. If the background does not repeat, or if the window size is reduced, the animation becomes smooth in FF.

For what it's worth, I was able to side-step the issue by instead animating a patterned SVG.

Comment 7

[Remi]

Here's an example demonstrating this bug : http://codepen.io/hteumeuleu/pen/EezcD

The animation works well in Chrome 42 and Safari 7. It doesn't work on Firefox 37.

Comment 8

[Julien Wajsberg [:julienw]]

I also found bug 945600 that could be related.

Comment 9

[Masataka Yakura]

this is per spec. background-image (and other image-related bg property) isn't animatable.
https://drafts.csswg.org/css-backgrounds-3/#the-background-image

Comment 10

[Julien Wajsberg [:julienw]]

background-position is animatable per spec: https://drafts.csswg.org/css-backgrounds-3/#the-background-position

Comment 11

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Attachment: testcase from comment 6

Comment 12

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

I see stuttering on attachment 8655131 [details] in a browser session with a lot of other tabs open, but not in a browser session with only one tab.  It doesn't seem to depend on the width of the window.