Chrome/Safari Display Border Around Image

chrome/safari display border around image

Now I don't know if this is a bug with Chrome or not but the grey border appears when it can't find the image, the image url is broken or as in your case the src isn't there. If you give the image a proper URL and the browser finds it then the border goes away. If the image is to not have a src then you will need to remove the height and width.

Input CSS showing border in Chrome, Safari and Internet Explorer and no text

You have used both a CSS background property and the src attribute on the <input>. The src link is invalid so the browser is displaying the broken image placeholder. This looks different in every browser which is the border and small question mark you are seeing. IE shows a little red cross and a border.

Either make it <input type="submit"/> and use the CSS background property or use <input type="image" src=""/>

See this demo where the first button has a broken src attribute, and is showing the placeholder as well as the CSS background image. Whereas the second button is a submit button without the src and just the correct URL for the background image.

Edit: This has been asked before: How to change an input button image using CSS? and input type="image" shows unwanted border in Chrome and broken link in IE7

Border color of image appears red on Safari

I tried set-resetting css properties in css & also using jquery. Also tested the page on safari for windows, and the display was as expected(grey border) instead of red which appears in safari for Mac.

On all other browsers the css works fine. Also the bug wasn't there during the initial release of the site a year ago. So I assume its a bug in Safari-Mac.

Safari vs Chrome/Firefox: border-image vs border-color

Here's how you get around that bug:

Instead of

border-color:transparent;

use

border-color:transparent; border-color:initial;

As you discovered, Safari does have a bug related to border-color:transparent, but adding border-color:initial afterwards gets around that bug in Safari, and doesn't cause any additional problems in other browsers that support border-image.

For browsers that don't support border-image (which happens to be just IE <= 10), they happen to also not support the initial value there, so they fall back to border-color:transparent and you don't get a visible border.

Here's the fiddle: https://jsfiddle.net/L78gL7xc/2/

Chrome and Safari add 'border line' to img with css fixed height and width

It's a broken image, as you specify no src. Point the src somewhere and the border goes away.

Browser rendering of broken images vary greatly cross-browser and depending on whether you include an alt attribute (which you always should). A 1px inner-border is commonly drawn in broken images in more than just Webkit. You should not deliberately include a broken or srcless image in your document. If you don't want a src, it shouldn't be an <img>.

How to remove white border on lazy loaded images in Safari

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.

border-image slicing differences between browsers

Essentially, what you are seeing here is Safari behavior vs. the behavior of all other browsers, which sadly is a common frustration of many developers— Safari functioning differently and usually unexpectedly.

What you are seeing on iOS (mobile) is to be expected, because although there are different browser apps, all of them, even Chrome and Firefox are actually Safari (using the Safari browser engine, WebKit), simply reskinned with a different UI. There is only one iOS browser in actuality.

---

Supporting source #1: https://www.reddit.com/r/firefox/comments/9lpmkh/

As we all know Apple forces all third party browsers on iOS to use WebKit, essentially making them just re skinned versions of Safari; This puts Gecko Based Firefox and other Third party Browsers at a performance disadvantage.

---

Supporting source #2: https://www.quora.com/Is-Chrome-for-iOS-just-Safari-re-skinned

Google wasn't just being lazy using Safari's rendering engine. Apple requires people making browsers to use the UIWebView object. [This] means “exactly the same rendering engine”.

---

To be clear, this is a bug in WebKit/Safari. I have opened an official bug report to resolve this: https://bugs.webkit.org/show_bug.cgi?id=229803

---

Related Topics