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