How To Prevent A Background Image Flickering On Change

I'm applying a repeated background image from a canvas to a div via javascript like this: var img_canvas = document.createElement('canvas'); img_canvas.width = 16; img_canvas.hei

Solution 1:

Try to preload the image resource to the device storage by including the image in DOM like in the following HTML-Code. Maybe the error comes up because the image resource need to be loaded which takes some time (flickering).

<img src="imageToPreload.png" style="display:none;" alt="" />

You may prefer to use sprites-images. By using sprites your application will need less HTTP-Requests to load all ressources into your page. Also add the following CSS styles if you are using css animations. It will prevent background flickering on mobile devices:

-webkit-backface-visibility: hidden;
-moz-backface-visibility:    hidden;
-ms-backface-visibility:     hidden;

Solution 2:

Try adding this css to your background element:

-webkit-backface-visibility: hidden;
-moz-backface-visibility:    hidden;
-ms-backface-visibility:     hidden;

It should help with flickering..

You can also "force" hardware acceleration by adding this to your background element:

-webkit-transform: translate3d(0, 0, 0);

Another option is to use image instead of DIV and change only the image url.

Solution 3:

Preload your image like this, no need to include a <img> with display: none

<link rel="preload" href="/images/bg-min.png" as="image">

Solution 4:

I struggled with this for a bit, tried preloading, appending the image to the document, etc.

In the end, I resaved the JPEG without the "Progressive" option.

That fixed the rolling flicker when the img src was swapped.

Solution 5:

In my case changing height: 1080px; (background height) to height: fit-content;