aFarkas/lazysizes

Images not displaying when they have an alt tag

AlanJIsaacson opened this issue · 1 comments

I am having a problem with some images not loading correctly in Google Chrome.

An example page with the issue is https://www.botanic.cam.ac.uk/the-garden/gardens-plantings/systematic-beds/

Any of the pages below the level of https://www.botanic.cam.ac.uk/the-garden/gardens-plantings/ in the navigation seem to share this issue, however
https://www.botanic.cam.ac.uk/the-garden/gardens-plantings/fen-display
does load a portrait format image correctly (the affected images all seem to be landscape format).

If I open the dev tools and uncheck/check position: absolute the images load correctly. Also, if the alt attribute is either empty or missing the images load correctly.

Checking the network tab shows that all images return a 200 code as expected.

I have tested with images from a higher path in the navigation, and they also do not appear:
https://www.botanic.cam.ac.uk/the-garden/
The same markup is used in all places.

I have also tested for JS conflicts by disabling all other scripts on the page except for Lazysizes.

I have tested on a local development enviroment, a staging site and on the live URLs above. It only appears to be the Chrome browser (Version 92.0.4515.131) where loading is failing. I have tested Edge and Firefox on my Mac too.

This is a css issue. Your crazy top: -64343rem... moves those images out of view. Use top: 0, left: 0....