Übergang reibungslos ein Bild auf Bildlauf mit jQuery

Question

Ich habe einige Probleme beim Übergang ein Bild beim Scrollen.

Aus irgendeinem Grund, wenn das Bild mit dem zweiten ersetzt wird, blendet es zuerst mit einer seltsamen Transparenz und dann Übergänge, nicht sicher, wie es zu erklären, also habe ich eine Demo erstellt.

Kann jemand erklären, wie man es macht, damit die Farben glatt ohne das sonderbare Blitzen übergehen?

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: Das Problem scheint nur Safari beeinträchtigen wird

Answer 1

Sie könnten in ein paar zusätzlichen Übergang hinzufügen müssen Attribute für sie auf verschiedene Browser zu arbeiten (Wie Sie erwähnten es ist arbeitet nicht an Safari).

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