I have a div where I'm changing the background (using jQuery). These CSS3 rules allow the new background image to crossfade in nicely
transition: background-image 1s ease-in-out; background: center center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover;
The issue is that the background size is also transitioning.
So if it switches from a portrait to a landscape background image, for example, while fading, the image gets squished vertically and then stretched horizontally. This can be a bit nauseating.
Is there any way to use
but to only fade transition the background image itself without the background size?
Problem courtesy of: andrewtweber
That's just... weird.
isn't supposed to be animatable in the first place.
On the other hand,
, but it's very clear from your CSS that you don't
want to transition
. Yet, your browser chooses to animate it along with the image anyway.
Whatever your browser is doing, it's obviously ignoring the spec and just doing its own thing. Since
isn't animatable using CSS (I know Firefox and IE don't support it), and your background transition is already being handled with jQuery anyway, I suggest using jQuery instead of CSS to implement the crossfade to ensure it'll work consistently across browsers.
Solution courtesy of: BoltClock