How to remove white border around image on mobile webkit? - iphone

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.