New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Image flickers when updating src in Firefox #7

Closed
kingdido999 opened this Issue Dec 11, 2016 · 5 comments

Comments

2 participants
@kingdido999
Copy link
Owner

kingdido999 commented Dec 11, 2016

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 kingdido999 added the bug label Dec 11, 2016

@kingdido999

This comment has been minimized.

Copy link
Owner

kingdido999 commented Dec 11, 2016

@daxhns

This comment has been minimized.

Copy link

daxhns commented Dec 12, 2016

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 comment has been minimized.

Copy link
Owner

kingdido999 commented Dec 12, 2016

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

This comment has been minimized.

Copy link

daxhns commented Dec 12, 2016

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 added a commit that referenced this issue Dec 18, 2016

@kingdido999

This comment has been minimized.

Copy link
Owner

kingdido999 commented Dec 18, 2016

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
)

@kingdido999 kingdido999 changed the title Image blinks when changing src in Firefox Image flickers when changing src in Firefox Jan 14, 2018

@kingdido999 kingdido999 changed the title Image flickers when changing src in Firefox Image flickers when updating src in Firefox Jan 14, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment