I've recently implemented a lazy image loading feature on an image-heavy website, and have been having issues with reflow. I fixed the problem by manually specifying the image dimensions using the width and height image attributes, as below:
It works great in every browser except Safari, but I'm confused because Safari 14 (desktop and mobile) supposedly supports computing aspect ratios based on the width and height attributes.
None of my up-to-date macOS or iOS devices seem to recognize this feature in Safari, but they do in every other modern browser. The expected outcome is that the spot on the page where the <img /> tag is located should be reserved (painted) based on the calculated aspect-ratio using the width and height attributes, to be later replaced by the data-src attribute via the lazy-loading plugin. In Firefox and Chrome (+ Chromium-based browsers), the space is reserved until the image is loaded (to prevent reflow); in Safari, the space is not reserved and the page shifts after the image is loaded.
Anyone have any clue as to what I'm doing wrong? I'm not worried about backwards compatibility (Safari doesn't support the feature in question before 14.0) or IE support, so this solution is perfectly fine for me until aspect-ratio becomes available in browsers other than Chrome. Safari is important, though, so I'll take any suggestions.
Code Block <img class="lazyload img-fluid" data-src"/path/to/image.jpg" width="200" height="400" />
It works great in every browser except Safari, but I'm confused because Safari 14 (desktop and mobile) supposedly supports computing aspect ratios based on the width and height attributes.
None of my up-to-date macOS or iOS devices seem to recognize this feature in Safari, but they do in every other modern browser. The expected outcome is that the spot on the page where the <img /> tag is located should be reserved (painted) based on the calculated aspect-ratio using the width and height attributes, to be later replaced by the data-src attribute via the lazy-loading plugin. In Firefox and Chrome (+ Chromium-based browsers), the space is reserved until the image is loaded (to prevent reflow); in Safari, the space is not reserved and the page shifts after the image is loaded.
Anyone have any clue as to what I'm doing wrong? I'm not worried about backwards compatibility (Safari doesn't support the feature in question before 14.0) or IE support, so this solution is perfectly fine for me until aspect-ratio becomes available in browsers other than Chrome. Safari is important, though, so I'll take any suggestions.