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:
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.
- <aside> vs <section>: Which one should I use for a bibliography/reference section?
- Vertical align in bootstrap table
- How to disable external CSS in browser for testing?
- Checkbox Stays Checked on Page Refresh
- How do I recognize swipe events in React?
- How do I right align div elements?
- Html and css to add colorful codes
- How do i make a form with an image and text
- What is the easiest way to create an HTML mouseover tool tip?
- How to insert a line break in ::before of an element using CSS and attr()
- Why is using onClick() in HTML a bad practice?
- how to get a full page web app even in safari?
- When hover over img, all other images blur using CSS :not(:hover)
- Bootstrap-Select : remove ugly focus border
- Pure CSS Continuous Horizontal Text Scroll Without Break
- Get all <span> texts containing non-zero dollar amounts from an HTML string
- Using Matter.js to render to the DOM or React
- Matter.js Mouse Controls Setup
- React won't draw anything in the canvas in useEffect
- Creating Custom Select at Run Time
- How do you specify table padding in CSS? (table, not cell, padding )
- How is character encoding specified in a multipart/form-data HTTP POST request?
- How to regex scrape HTML and ignore whitespace and newlines in code?
- How (and why) to use CSS "display: table-cell"?
- How to make <button> fill a table cell <td>?
- How do I make a placeholder for a 'select' box?
- Communication between content script and web_accessible_resources iframe
- Only first placeholder displayed in Django's UserCreationForm
- Pulling out some text from a giant HTML file using Nokogiri/xpath
- jQuery UI 1.10: dialog and zIndex option