This can be a rendering bug it happens onto opera too, a temporary fix can be setting the width of the image to width: 99.99999%;
.galerie-image img {
border: 0;
border-radius: 50% 10px;
height: auto;
margin-bottom: -4px;
width: 99.99999%;
}
Question
If I use a floating, block-element as a container for an image and the image has some border-radius, all webkit browser have a problem with rendering the background-color of the container element. In IE 11 and the latest firefox all works fine!
Here is a fiddle as example: http://jsfiddle.net/5wZeG/2/
the css:
.galerie-image {
background: #00DDDD;
border-radius: 10px;
height: 200px;
width: 200px;
display: block;
float: left;
}
.galerie-image img {
border: 0;
border-radius: 50% 10px;
height: auto;
margin-bottom: -4px;
width: 100%;
}
the HTML:
<a class="galerie-image" target="_blank" title="The Quadrat" href="http://google.com">
<img alt="Quadrat" title="The Quadrat" src="http://dummyimage.com/400x400/000/fff&text=Placeholder" />
</a>
and an image: FF vs chrome:
is this a bug or is there a simple solution? (Thank you in advance!)
La solution
This can be a rendering bug it happens onto opera too, a temporary fix can be setting the width of the image to width: 99.99999%;
.galerie-image img {
border: 0;
border-radius: 50% 10px;
height: auto;
margin-bottom: -4px;
width: 99.99999%;
}