Description
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]