native loading lazy causes some images not to load

Question

I have this code (reduced minimum to reproduce):

<div style="overflow:hidden;height:160px;width:160px;border:4px solid red;position:relative;">
  <img src="https://josefkorda.cz/img/sluzby-koncerty.jpg" loading="lazy" style="height:100%;position:absolute;top:0;left:-1px;">
</div>

Where the image (in red border) is natively lazy loaded with loading="lazy".

The issue is that the image is not loaded until I change some css in DevTools or delete the loading="lazy" attribute in the code.

It starts to work if :

• left:0 for image or
• overflow:hidden is deleted or
• loading="lazy" is deleted

Here is the link for live example (UPDATE: by giving the dimensions to the images, the issue is no longer visible in example)

Here is the example image where the first circle with image is how it should look like and also how it works without loading="lazy". Next circles (images) are the problematic ones with loading="lazy" attribute in an img tag.

Smithers

I resolved it with workaround by giving the image width and height attributes, but I still am curious, why without that it does not work. I believe the dimension attributes are optional. – Smithers

It is probably some other CSS rules over-ride your own rules when you give style=" " on img tag. Use your web inspector and find out the weight of the rules that are overriding it, besides that your HTML/CSS works as intended. – Irvinirvine

@Irvinirvine no, it is not. Try the code snipped. Even that little bit of code in example causes that. If you take out loading="lazy", then it works – Smithers

Answer 1

I recently had this issue as well, it seemed to resolve itself when you add the CSS style 'aspect-ratio' as well

Singleminded

Answer 2

In case anyone faces this issue, the main reason is the parent overflow is hidden (I don't know why). For my use case overflow: clip; fixed the issue.

Pineal