transition smoothly an image on scroll with jQuery

Question

I am having some issues transitioning an image when I'm scrolling.

For some reason when the image gets replaced with the second one it fades out first with a weird transparency and then transitions, not sure how to explain it so I created a demo.

Can someone explain how to do it so the colors transition smoothly without the weird flashing?

html {
background-image:url(http://i.imgur.com/ZhVps3b.jpg?1);
transition: all 1s ease;
}

html.scrolled {
background-image:url(http://i.imgur.com/h6rmrc0.png?1);
}

http://jsfiddle.net/pZrCM/652/

Update: The issue seems to be only affecting Safari

Answer 1

You might need to add in a few extra transition attributes for it to work on different browsers (As you mentioned it's not working on Safari).

-webkit-transition: all 1s ease;/* Safari & Chrome */
-moz-transition: all 1s ease;/* Firefox */
-o-transition: all 1s ease;/* Opera */
transition: all 1s ease;