'How to remove white border on lazy loaded images in Safari

I'm adding some native lazy loading to images on a website using the standard loading="lazy" tag. It works fine and does the job I want, but in Safari (desktop and mobile) the images prior to loading in have a white border that I cannot seem to get rid of. It only appears for a brief flicker as you scroll, but is particularly obvious and annoying on an otherwise dark website!

It appears to be the same thing that happens if an image fails to load, and can be replicated by disabling images using Safari's "develop" menu.

I've tried to remove this with all the CSS I can think of...

border: none !important;
outline: none !important;
border-color: #000 !important;

... but no luck getting rid of it.

Anyone able to help? Is this even possible? Thanks

Example of how this looks:

Example of white border on an image

htmlcssimagesafarilazy-loading


Solution 1:[1]

This has been answered here: chrome/safari display border around image

Simon_Weaver gave a detailed answer with solutions for lazy load conditions if you scroll down below the primary answer.

Solution 2:[2]

You could look up Safari Webkits to to change certain things like a scroll bar and more.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dean Miranda
Solution 2 RagDev

Related Questions