1

I have a div with a background image. Using skrollr, I'm changing the background image, getting sort of an animation (paper airplaine folding up). to prevent interpolation, I use a custom easing function:

easeInt: function(p) {
   return Math.floor(p * 13) / 13;
}

My animation looks like this (skrollr-stylesheet):

3528 {
    background-image[easeInt]: url("img/plane14/plane0.png");
}

3928 {
    background-image[easeInt]: url("img/plane14/plane13.png");
}

When the animation's running, the background image disappears for a bit before the next one appears, causing the animation to flicker. This issue only shows up in Firefox, not in Chrome or Safari. I am preloading all the images using

var img1 = new Image(); img1.src = 'img/plane14/plane1.png';

Preloading all the images using HTML didn't do the job either:

<div style="width:100px; height:100px; position: fixed; top: -100px; left: -100px;">
<!-- loading all images as <img src="imageurl.png"> -->
</div>

I also tried using skrollr's option of preventing interpolation. Already checked my easing function, it should work properly. In firebug I can observe that the background-image is being changed as desired. Still I get this flickering.

schafran
  • 669
  • 6
  • 11

1 Answers1

2

I am not familiar with Skrollr but I have been looking into a similar situation with images flickering when they have been swapped.

My understanding of the issue is that Firefox doesn't decode the images until they are viewed for the first time and the flicker you are seeing is the image trying to display before the decode is ready. Loading the image is separate to the decode so that is why preloading has no effect on this issue for Firefox.

If you go to about:config in Firefox its possible to change the setting image.decode-immediately.enabled and this should fix the issue locally. Unfortunately I haven't found a better way to solve this issue.

I found several bugzilla cases I believe are related to this issue:

https://bugzilla.mozilla.org/show_bug.cgi?id=1149893

https://bugzilla.mozilla.org/show_bug.cgi?id=1158440

Kevin Langille
  • 116
  • 1
  • 7
  • Another bugzilla link: https://bugzilla.mozilla.org/show_bug.cgi?id=705826. This one has a suggested work around of either preloading the images behind other elements or drawing them to a canvas object. – Kevin Langille Nov 12 '15 at 23:18