8

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

Alex
  • 1,051
  • 1
  • 12
  • 26
  • 1
    Most likely, Safari assigns some kind of temporary box for the image. And that box has a border. There would be some sort of border styling in the user style-sheet defined by the browser. – Sami Malik Apr 28 '22 at 20:06
  • What version of Safari and OS? – morganney Apr 30 '22 at 13:59
  • @morganney its obviously Mac OS unless u mean which IDE or software... they probably use VSCode – RagDev May 04 '22 at 14:03
  • @RagDev you obviously don't know that both Safari and MacOS have different versions. – morganney May 04 '22 at 14:05
  • Please try this one box-shadow: none !important; – Ashok K May 05 '22 at 06:31
  • @morganney unless they have an rare old MacOS system then it should always update to the newest OS and that is not a old feature especially since you can't get good coding softwares on an older system without it dying and Safari does have other versions but why does that matter because no one usually takes their time to download the Safari app since they already either have FireFox,Internet Explorer or Google Chrome – RagDev May 06 '22 at 13:46
  • @RagDev you want to develop for the web and ask why browser versions matter? Ok. – morganney May 06 '22 at 13:47
  • because... its most likely up to date since it has the updated css webkit – RagDev May 06 '22 at 13:48
  • This happens in at least iOS 15 and Safari 15 on both macOS Monterey and macOS Catalina – Alex May 09 '22 at 11:08
  • @AshokK unfortunately changing the box shadow in any way makes no difference – Alex May 09 '22 at 11:08
  • This looks like a bug. See https://bugs.webkit.org/show_bug.cgi?id=243601 – styfle Aug 05 '22 at 19:51

3 Answers3

5

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

styfle
  • 22,361
  • 27
  • 86
  • 128
2

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.

Dean Miranda
  • 106
  • 3
  • Thanks, this option using JS does look to probably be the best workaround - there doesn't seem to be any other way using just CSS. – Alex May 09 '22 at 11:10
  • Thanks for pointing that out. You can also use the "Share" link in the answer to have a direct link to it: https://stackoverflow.com/a/68614653/1895428 – pmrotule Sep 22 '22 at 09:25
0

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

John Williams
  • 4,252
  • 2
  • 9
  • 18
RagDev
  • 82
  • 1
  • 5