0
637
ViewsHow 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:
2 answers
Answer question0
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.
0
You could look up Safari Webkits to to change certain things like a scroll bar and more.