CODEWITHSUNDEEP
htmlcssimagesafarilazy-loading
Alex
Alex

Reputation: 1391

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

Upvotes: 8

Views: 4378

Answers (2)

styfle
styfle

Reputation: 24670

This is a bug in Safari 15: https://bugs.webkit.org/show_bug.cgi?id=243601

Here's a hack using clip-path to remove the edge of the image if Safari is detected:

@supports (font: -apple-system-body) and (-webkit-appearance: none) {
  img[loading="lazy"] {
    clip-path: inset(0.6px)
  }
}

The bug was fixed a few versions ago but it wasn't released to stable until Safari 16.4

Upvotes: 9

Dean Miranda
Dean Miranda

Reputation: 106

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.

Upvotes: 2

Related Questions