如何在野生动物园中的懒惰图像上删除白色边框
我使用标准loading =“ lazy”
标签将一些本机懒惰加载添加到网站上的图像中。它可以正常工作并且可以完成我想要的工作,但是在加载之前,在Safari(桌面和移动设备)中,图像具有我似乎无法摆脱的白色边框。滚动时,它只出现在短暂的闪烁中,但在其他黑暗的网站上特别明显且令人讨厌!
如果图像未能加载,这似乎是同一件事,并且可以通过使用Safari的“开发”菜单禁用图像来复制。
我试图用我能想到的所有CSS删除此问题……
border: none !important;
outline: none !important;
border-color: #000 !important;
但是没有运气摆脱它。
有人可以提供帮助吗?这甚至可能吗?谢谢
的外观示例:
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:
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
This is a bug in Safari 15: https://bugs.webkit.org/show_bug.cgi ?
/elethmaciej/status/1618296591475183616“ rel =“ noreferrer”>几个版本 ,但直到 Safari 16.4
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:The bug was fixed a few versions ago but it wasn't released to stable until Safari 16.4
这已经在这里回答: chrome/safari display border aigral
simon_weaver 如果您向下滚动,则详细的答案则是解决懒惰负载条件的解决方案。
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.