Firefox Flicker Bug for img Display and Background Transitions

[jinch]

I’m trying to achieve an animation effect by swapping out imagery with Skrollr but running into some issues with Firefox rendering image display and background-image transitions choppy.

• I have tried a pre-loader but doesn’t seam to make a difference. • I have applied == -webkit-transform:translate3d(0,0,0); == to the containing div as a work around I read about but this doesn't seam to work for me either.

---

Here are a couple of examples to demonstrate the issue.

1. WITH IMAGE DISPLAY:

   http://inchdesigns.com/projects/synergy/test_display2_preloader_small_WTF.html

This by far works the smoothest out of the two techniques I have tried but it still flickers in firefox. This basically changes the display from BLOCK to NONE as a person scrolls. Its placed inside a container with overflow:hidden in order to pre-cache each image before changing (this does help a bit). I picked this up from this site (http://www.kia.co.uk/new-cars/range/mid-sized-cars/proceed-gt/intro.aspx) ~ if you view the car rotation they seam to have this nailed down (even in Firefox) ~ so not sure what I’m doing wrong?

---

1. BACKGROUND-IMAGE

   http://inchdesigns.com/projects/synergy/test_backgorund_preloader_small.html

This didn’t work as well in any of the browsers. I have seen this effect used successfully but for some reason mine just isn’t rendering smoothly? Maybe I’m trying to load to many images?

---

Anyway / figured I go to the source on this one…

Your guidance is much appreciated but regardless of your response / thank you for an awesome plugin! Now i just need to figure out how to use it efficiently :)

j