Overflow hidden, display: table and border-radius in Internet Explorer(all versions)
I have an image (represented by a green area in the example) that is supposed to be "masked" by a circle in the left side and vertically centered. It works as intended in Firefox and Chrome but not on any version of IE (tested IE 11 and Edge). On IE the corners of the image are shown, that is the part of the image supposed to be hidden by the border.
Here is the fiddle (test in Chrome for desired result):
http://jsfiddle.net/89j3mnj7/
.left_circle {
width: 40px;
height: 80px;
border: 4px solid red;
border-top-left-radius: 200px;
border-bottom-left-radius: 200px;
}
.image-mask {
height: 80px;
width: 150px;
border-top-left-radius: 40px;
border-bottom-left-radius: 40px;
border-right: 0;
display: table;
overflow: hidden;
}
.image-container {
display: table-cell;
vertical-align: middle;
}
.image {
background-color: green;
width: 100px;
height: 50px;
}
<div class="left_circle">
<div class="image-mask">
<div class="image-container">
<div class="image"></div>
</div>
</div>
</div>
Why is this happening?
Not entirely sure, if you push the element out of the container overflow is respected, however, the overflow does not appear to apply to the area cut off by border-radius. The issue only seems to occur when the divs are set to display like a table by using display: table;. This may not be a bug but an interpretation of the spec as Opera appears to function in the same way.
How can it be fixed?
Removing display: table; and display: table-cell; from .image-mask and .image-container will allow the overflow to work on the area cut off by border-radius but .image will lose the vertical alignment that display: table; provides. We will need to use another method to vertically align the element:
- Remove
.image-containeras it is no longer required - Add
position: relative;to.image-mask, this will allow.imageto be positioned relatively to it - Add
bottom: 0;,left: 0;,margin: auto 0;,position: absolute;andtop: 0;to.image, this will vertically center it in relation to.image-mask.
.left_circle {
width: 40px;
height: 80px;
border: 4px solid red;
border-top-left-radius: 200px;
border-bottom-left-radius: 200px;
}
.image-mask {
height: 80px;
width: 150px;
border-top-left-radius: 40px;
border-bottom-left-radius: 40px;
border-right: 0;
overflow: hidden;
position: relative;
}
.image {
background-color: green;
width: 100px;
height: 50px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
margin: auto 0;
}<div class="left_circle">
<div class="image-mask">
<div class="image"></div>
</div>
</div>The above centering technique should work in IE9. If IE9 is not a requirement centering could be achieved by using flexbox:
.left_circle {
width: 40px;
height: 80px;
border: 4px solid red;
border-top-left-radius: 200px;
border-bottom-left-radius: 200px;
}
.image-mask {
height: 80px;
width: 150px;
border-top-left-radius: 40px;
border-bottom-left-radius: 40px;
border-right: 0;
display: flex;
overflow: hidden;
align-items: center;
}
.image {
background-color: green;
width: 100px;
height: 50px;
}<div class="left_circle">
<div class="image-mask">
<div class="image"></div>
</div>
</div>