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

found this http://stackoverflow.com/questions/21767037/css-transitions-not-working-in-safari — Atula, Apr 28 '16 at 05:17
Andrew your solution helped, could you please post that as an answer? Also could you explain why Safari didn't like the simple solution I had? Thanks a lot! — Victor --------, Apr 28 '16 at 05:28

score 0 · Answer 1 · answered Apr 28 '16 at 05:16

0

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;

answered Apr 28 '16 at 05:16

Alan Tan

347
2
6

I updated it with your suggestion but it still does it in Safari, any other thoughts? Thanks. – Victor -------- Apr 28 '16 at 05:18

transition smoothly an image on scroll with jQuery

1 Answers1