Image flickers when updating src in Firefox

[kingdido999]

Image blinks when changing src (for the first time) in OSX Firefox 50.0.2 and Android Firefox 50.0.2. The images do get preloaded though.

[kingdido999]

Very likely it's an existing bug: Images are flashing when updates by img.src[]=url in Firefox >= 8.0.

Related:

• Firefox flickering

[daxhns]

Yes, it's a bug in Firefox... shame that they did not fix it already.

I have managed to find a workaround in my fork, basically adding another, temporary, invisible image to the DOM, forcing internal Firefox calculations and image pixel rendering, just before swapping with the real image, to prevent flicker.

Something like this:

// upgrade source if possible
      if (target.hasAttribute('data-original')) {
        srcThumbnail = target.getAttribute('src');

        setStyle$1(target, {
          width: imgRect.width + 'px',
          height: imgRect.height + 'px'
        });


        temp_hires_img = new Image();

        var data_original =  target.getAttribute('data-original');
        temp_hires_img.onload = function () {
        
          if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1){
            
            //console.log("FIREFOX");

            var $target_clone = $(target).clone();
            $target_clone.attr('src', data_original);
            $target_clone.css("position", "absolute");
            $target_clone.css("zIndex", 0);       // important
          
            $('body').after($target_clone);

            setTimeout(function(){ target.setAttribute('src', data_original); $target_clone.remove(); }, 200);
          
          }
          else{     // modern browsers
            target.setAttribute('src', data_original);
          }
        
          $(overlay).removeClass("small_loading_indicator");

          temp_hires_img = null;      // clear temp hi-res image, it has been loaded and inserted

        }   // img.onload

        temp_hires_img.src = data_original;      // triger loading hi-res image

      }

It uses jQuery, but maybe you can re-write it in pure javascript.

Here is the demo: http://hnsmedia.net/zooming/

[kingdido999]

This kind of workaround by detecting user agent is not recommended and unreliable. navigator.userAgent has been deprecated and we should avoid using that.

[daxhns]

I agree, but we can't do feature detection here since this is not a feature but a bug in Firefox, so this is the only way. Hopefully, navigator.userAgent will be supported long enough until this bug is fixed in Firefox.

[kingdido999]

Now it inserts a temporary hi-res image into the DOM (takes no space and invisible, removes it afterwards) before updating image src, for all browsers. This is a not pretty but reasonable fix. Thanks @daxhns for the suggestion.

const parentNode = this.el.parentNode
const temp = this.el.cloneNode(false)

// Force compute the hi-res image in DOM to prevent
// image flickering while updating src
temp.setAttribute('src', this.srcOriginal)
temp.style.position = 'fixed'
temp.style.visibility = 'hidden'
parentNode.appendChild(temp)

// Add delay to prevent Firefox from flickering
setTimeout(
  function updateSrc() {
    this.el.setAttribute('src', this.srcOriginal)
    parentNode.removeChild(temp)
  }.bind(this),
  50
)