react-lazy-load-image-component icon indicating copy to clipboard operation
react-lazy-load-image-component copied to clipboard

Terrible performance in Safari

Open LinusGeffarth opened this issue 3 years ago • 3 comments

Bug description The performance in Safari is terrible. It works really smoothly in Chrome, but in Safari, the whole page becomes unresponsive and takes seconds to load. When using a normal <img> instead of <LazyLoadImage>, the site is as responsive as in Chrome, so it has to be connected to the lazy load image component.

To Reproduce Simple image display:

<LazyLoadImage className={className} alt={alt} effect="blur" src={src} /> 

Expected behavior Well, I expect the component to work smoothly in Safari, just like it does in Chrome.

Video See this screencast. Both clips show Safari: the first part is with normal <img, the second part is with <LazyLoadImage>.
Both clips were taken only 2 seconds apart, on the same machine, in the same network, under literally the same conditions.

Technical details:

  • Package version: [1.5.0]
  • Server Side Rendering? [No]
  • Device [Desktop]
  • Operating System: [macOS]
  • Browser: [Safari]

LinusGeffarth avatar Sep 10 '20 08:09 LinusGeffarth

+1. The lib is awesome on every browser, but safari freezes. The lib thus can't be used on a pro application. It's a pity because it works so smoothly otherwise. Any fix would be highly appreciated!

DoneDeal0 avatar Nov 07 '20 18:11 DoneDeal0

Same experience from my side. Seems like Safari is the new IE :-)

esbenjuul avatar Nov 01 '21 10:11 esbenjuul

Same story on iPhone 12 Safari 15.1

vitaliyan avatar Apr 26 '22 11:04 vitaliyan