Safari not computing image aspect ratios from width and height attributes

[sulliops]

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:

<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 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.

Here's a CodePen example with near identical code to mine (you should open in Safari and click immediately on "Nav 4" to see the issue): https://codepen.io/sulliops/full/QWdwRxx
Here's a screencap of my issue: https://gyazo.com/da76046282965f7a32ed3d85cc7423df

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.

 

[arn]

Hmm... the images on the front page are lazy loaded, and is working properly in saving the space. Let me look at your code a bit more closely.

 

[sulliops]

Hmm... the images on the front page are lazy loaded, and is working properly in saving the space.

They are, now that I look at it. Seems to be the same lazy-loading plugin, too. The only tangible difference in code there is the use of `data-sizes="auto"`, which shouldn't make any difference, but I'll go ahead and give it a try.

The CodePen example is completely broken, all of the sudden. Haven't touched it since I created it, but let me go fix it really quickly.

 

[arn]

I figured it out I think.

You need a non empty "src" for Safari to calculate the size.

try adding src="https://images.macrumors.com/images-new/1x1.trans.gif" to your <img> html

arn

 

[sulliops]

I figured it out I think.

You need a non empty "src" for Safari to calculate the size.

try adding src="https://images.macrumors.com/images-new/1x1.trans.gif" to your <img> html

arn

Wow, that is beyond inefficient — but it worked in the CodePen. Actually applying that fix on my production website didn't do much good, though — it actually broke compatibility with other browsers, including Safari, and the reflow issue is back in full swing.

Any ideas?

 

[arn]

Wow, that is beyond inefficient — but it worked in the CodePen. Actually applying that fix on my production website didn't do much good, though — it actually broke compatibility with other browsers, including Safari, and the reflow issue is back in full swing.

Any ideas?

Hmm... If you pm me the site, I can take a quick look.

arn