Open Bug 1036761 Opened 6 years ago Updated 5 years ago

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

Categories

(Core :: Layout, defect)

30 Branch
x86
macOS
defect
Not set
normal

Tracking

()

People

(Reporter: u511259, Unassigned)

Details

Attachments

(1 file)

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).
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?
Flags: needinfo?(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?
Flags: needinfo?(tnikkel)
Flags: needinfo?(jp)
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.
(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.
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.
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.
Flags: needinfo?(jp)
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.
I also found bug 945600 that could be related.
Status: UNCONFIRMED → NEW
Ever confirmed: true
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
Component: Graphics: Layers → Layout
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.
You need to log in before you can comment on or make changes to this bug.