react-lazy-load-image-component
react-lazy-load-image-component copied to clipboard
Terrible performance in Safari
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]
+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!
Same experience from my side. Seems like Safari is the new IE :-)
Same story on iPhone 12 Safari 15.1