[FIXED] How to remove white border on lazy loaded images in Safari

Issue

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:

Solution

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.

Answered By - Dean Miranda

Answer Checked By - Pedro (PHPFixing Volunteer)