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); 
}

Answer 1

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.