How to remove white border around image on mobile webkit?
css, ipad, iphone, mobile-webkit, webkit
Solution
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.
Problem
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); } ```