I've noticed some residual overflow in my simple layout that becomes quite apparent when setting a border radius. The expected behavior is for the white div class='inner' to fully cover the red div class='outer'. However, there seems to be overflow at both ends of the div.
Example:
.outer {
background-color: red;
width: 500px;
height: 50px;
position: relative;
overflow: hidden;
border-radius: 5rem;
}
.inner {
background: white;
width: 100%;
height: 100%;
position: absolute;
}<div class="outer">
<div class="inner"></div>
</div>I'm using this layout for a loading bar effect where inner translates during an animation while media plays. I've tried adding properties like z-index and using masks, along with exploring webkit, but nothing has resolved the issue so far.
Edit
To illustrate more clearly: Overflow hidden is applied so that any overflow from the inner translation is hidden outside the parent div. Below is an example showing a horizontal translation of 10%. I'm trying to achieve the overflow effect without bleeding from the edges with border radius applied.
The translation begins at 0%, which is similar to the previous example.
This issue was also reported on Issue 491574: border-radius bleeds background-color
Similar to this question - CSS border radius background color bleed but the use case of overflow doesn't apply here.
.outer {
background-color: red;
width: 500px;
height: 50px;
position: relative;
border-radius: 5rem;
overflow: hidden;
}
.inner {
background: white;
width: 100%;
height: 100%;
position: absolute;
transform: translateX(10%);
}<div class="outer">
<div class="inner"></div>
</div>The code above, though not exact, is embedded in a ReactJS app and I am experiencing this issue in both Chrome and Mozilla browsers.