Description
We recently implemented the native HTML loading="lazy" attribute on all product images within the category grid to improve performance. However, iOS Safari has a highly aggressive, non-standard implementation of this specification. Safari frequently refuses to load the images even when they are clearly visible in the viewport, resulting in customers scrolling through a grid of completely blank, empty grey boxes.
Proposed Solution
- Audit the global
<ProductCard /> component and the specific <img> tags.
- Remove the native
loading="lazy" attribute, as relying on inconsistent browser implementations for core revenue-driving visuals is too dangerous.
- Implement a robust, deterministic JavaScript-based Intersection Observer (e.g., utilizing
react-lazyload or react-intersection-observer).
- This guarantees that the exact millisecond the image container breaches the viewport threshold, the React component explicitly swaps the
data-src to the src attribute, ensuring absolute visual reliability across all browsers and devices, completely fixing the blank grid issue on iPhones.
Description
We recently implemented the native HTML
loading="lazy"attribute on all product images within the category grid to improve performance. However, iOS Safari has a highly aggressive, non-standard implementation of this specification. Safari frequently refuses to load the images even when they are clearly visible in the viewport, resulting in customers scrolling through a grid of completely blank, empty grey boxes.Proposed Solution
<ProductCard />component and the specific<img>tags.loading="lazy"attribute, as relying on inconsistent browser implementations for core revenue-driving visuals is too dangerous.react-lazyloadorreact-intersection-observer).data-srcto thesrcattribute, ensuring absolute visual reliability across all browsers and devices, completely fixing the blank grid issue on iPhones.