Image flickering in Sarafi browser

[TaWReOn]

Bug description

I'm expecting image flickering while component switches from placeholderSrc to src image on Safari browser. It seems that in Safari placeholderSrc gets removed from the DOM before src attribute's image is applied. And it Chrome src attribute's image is applied right on top of placeholderSrc image.

To Reproduce

I'm using LazyLoadImage with params provided below.

 <LazyLoadImage
      alt={alt}
      className={'lazy-image-container'}
      src={imgSrc}
      key={id}      
      placeholderSrc={thumbnail ? thumbnail : defaultLogo}
      effect={thumbnail ? '' : 'custom'}
    />

Expected behavior

src attribute image should be applied right on top of placeholderSrc image in Safari browser.

Screenshots

Loading in Chrome (no flickering):

Loading in Safari (flickering):

Additional Details:

I might found out that flickering happens in LazyLoadImage.jsx component in const lazyLoadImage = loaded ? image : this.getLazyLoadImage(image); line. If this.state.loaded is true the lazyLoadImage value is this.getImg() function's result otherwise - this.getLazyLoadImage(image). If you won't check for loaded state, and always write to lazyLoadImage variable result of this.getLazyLoadImage(image) function the flickering will disappear.

Technical details:

• Package version [1.3.2]
• Server Side Rendering? [No]
• Device [Desktop]
• Operating System [Mac OS]
• Browser [Safari]
• React version [16.6.0]

[sunknudsen]

I believe the same happens on Firefox 74.0 on macOS Mojave 10.14.6. @TaWReOn do you have Firefox to try it out with your code?

[sunknudsen]

Never mind @TaWReOn. Just tested on Chrome and I am also seeing a flicker. Investigating.

[chongckw1996]

Hi, Any update on this ?