How to remove white border around image on mobile webkit?

Question

On desktop Webkit, my image displays fine with no problems. When viewing it on mobile Webkit (iPad iOS 5 for example), a glaring white border appears. I am using background-image and background-size because my element has a fixed proportion, but the image source itself can be any random proportion.

JSFiddle:

http://jsfiddle.net/tokyotech/A2zAv/

HTML:

<img />

CSS:

body {
    background: #666; }

img {
    width: 8em;
    height: 8em;
    display: block;
    background: rgba(0,0,0,0.5);
    box-shadow: 0 1px 0 rgba(255,255,255,0.1),
        0 1px 0 rgba(0,0,0,0.5) inset;
    background-size: cover;    
    border-radius: 0.4em;
    background-image: url(http://1.bp.blogspot.com/_yhfaur8OkQ0/SwQzJkzYt5I/AAAAAAAAAtU/5eIqHFmS63s/s400/ev.jpg); 
}

enter image description here

Is there any real reason you're using a `background-image` property as supposed to the `` tag's normal `src=""` attribute? — Blieque, Mar 14 '13 at 20:12
@Blieque so I can crop the image with `background-size:cover` — Pwner, Mar 14 '13 at 22:34

score 5 · Accepted Answer · edited May 23 '17 at 12:04

5

This is a weird issue that happens when you don't specify an img src. The browser wants to show that the element exists but doesn't have any content so it wraps it with a border. You can fix this by declaring the img's source in the HTML.

Try this fiddle: http://jsfiddle.net/A2zAv/3/

If you don't want to declare an img src, don't use the img element for your image. You could use a div and get around this rendering issue instead. This will allow you to contain the image to the container as needed.

http://jsfiddle.net/A2zAv/4/

As a further alternate, you could insert a 1px by 1px transparent spacer gif in your image's src if you absolutely want to use an img tag.

See Strange border on IMG tag for more details.

edited May 23 '17 at 12:04

Community

1
1

answered Mar 14 '13 at 20:15

kpeatt

769
6
8

Great solution. I an an `` tag to be semantically correct. If I would have used `
`, someone else looking at my code wouldn't know that it should hold an image without cross examination with the CSS.
– Pwner Mar 14 '13 at 22:32
Fair enough. I think having a `src`-less `img` tag is as unsemantic as using a div in this instance but to each their own. Alternatively, I think [this fiddle](http://jsfiddle.net/A2zAv/5/) might be your most semantic solution... although it might result in loading the image twice. Basically, I'm pushing the image out of view with padding and the background image shows behind it. People reading the HTML can still grab the image and you've got a decent browser fallback. – kpeatt Mar 14 '13 at 23:00
Hi, I've a doubt. I'm try the solution of two pixels (modified the gif) because in my project it's impossible the other solutions. When I increase 2 pixels around the gif with white color, an strange stripe appears between two buttons. In others buttons appears pixels. If you need the picture, open an answer or other question. Can you help me please? My web only show in ipad. Sorry for my English :-) – lûr Oct 16 '13 at 14:59
Hi all, I post this question. Thanks. http://stackoverflow.com/questions/19420006/how-to-remove-strange-stripe-appears-between-two-buttons-on-mobile-webkit – lûr Oct 17 '13 at 06:48

How to remove white border around image on mobile webkit?

1 Answers1