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 background-size: cover but to only fade transition the background image itself without the background size?
That's just... weird. background-image isn't supposed to be animatable in the first place. On the other hand, background-size can be animated, but it's very clear from your CSS that you don't want to transition background-size. 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 background-image 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.