CODEWITHSUNDEEP
htmlioscsssvg
Chase
Chase

Reputation: 370

background-color of img element containing transparent SVG ins't displayed in iOS browser

I'm having trouble getting the background-color CSS property of an SVG image element to be honored by iOS browser. I'm using a 3rd-gen iPad (Model MD366LL/A, iOS 6.1.3) for testing.
I've tried several SVG images with transparent backgrounds, and the browser does not respect the background color set on the img element. The background color of an ancestor element ends up being displayed instead.
The same issue does not occur when using transparent PNGs. Also, other browsers I've tested honor the background color set on the img element (Android Browser, Opera, Firefox, Dolphin Browser and Chrome on Android 4.4; Firefox and Opera on Ubuntu 13.10 x64). I don't have access to an iPhone at the moment.

Some example code (substitute an URI to a transparent SVG image in the img element's src attribute): 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Test</title>

        <style type="text/css">
            html, body {
                margin: 0px;
                padding: 0px;
                position: relative;
            }

            .container {
                position: relative;
                width: 100%;
                background-color: #222222;
            }

            .image {
                width: 20%;
                background-color: #888888;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <img src="image.svg" class="image">
        </div>
    </body>
</html>

Is this a bug in the rendering of the image element, or am I missing something? If it is a bug, is there a workaround that doesn't require adding additional markup?

Upvotes: 2

Views: 3343

Answers (1)

James Martin-Davies
James Martin-Davies

Reputation: 651

Couldn't test against your question thoroughly, but if this is problem, you can try the following by wrapping the image instead.

HTML

<div class="images">
    <img src="image.svg"/>
</div>

CSS

.images {
    background: #333;
}

.images img {
    width: 20%;
}

UPDATE:

Here's a more modular approach for laying out a list of images.

You could do the following:

HTML

<div class="image-list">

    <div class="image-list__item">
        <img src="image.svg"/>
    </div>

    <div class="image-list__item">
        <img src="image.svg"/>
    </div>

    <div class="image-list__item">
        <img src="image.svg"/>
    </div>

    <div class="clearfix"></div>

</div>

CSS

*, *:before, *:after {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.image-list {
    background: #333;
    padding: 12px;
}

.image-list .image-list__item {
    width: 20%;
    float: left;
    padding: 12px;
}

.image-list .image-list__item img {
    max-width: 100%;
}

.clearfix {
    clear:both;
}

DEMO or DEMO using list items (a more semantic approach).

Upvotes: 2

Related Questions