Firefox won't transition body background

[SilverSerpent]

On my site I am working on I have the background set to transition when the page is scrolled more than 150px. In Chrome, the background nicely fades to the other. However, in Firefox (23), there is no smooth transition; the image jarringly changes. I know this can’t be a prefix problem because Firefox has used the unprefixed version of transition since version 16, and I’m using prefix-free so that shouldn’t matter anyways. Should this feature be supported in Firefox? And if so, does anybody know why this isn’t working?

[SilverSerpent]

Here is a reduced test case that works fine in Chrome but not in Firefox

[Paulie_D]

Only think I can think of is that FF might require you to transition the longhand version…so

transition: background-image 

rather than

transition:background

[SilverSerpent]

Thanks for the response, but that didn’t work. After doing a little more research, I’ve found this thread in which Paul Irish says Firefox can’t transition background-image. Seems like something they should implement.

Edit: I have also tried using an element with fixed position set to cover the whole screen, then animating the opacity of that to achieve the fade effect, but what happens is it stays fixed until the page reaches the scrolling threshold where the fade happens, then during the fade it snaps to a different position. Then the body is in a different position as well, and after a moment it snaps to the correct place.

[Author]

Posts