overflow hidden with border-radius and translate3d

Question

When content of block with overflow: hidden; and border-radius translated, its corners aren't hidding. Is there any solution to fix this?

HTML

<div class="scroller">
    <div class="scroller-content"></div>
</div>

CSS

.scroller{
    width: 300px;
    height: 500px;
    border: 3px solid red;
    border-radius: 30px;
    overflow: hidden;
}
.scroller-content{
    width: 300px;
    height: 300px;
    background: green;
    -webkit-transform: translate3d(0, -8px, 0);
}

http://jsfiddle.net/aZ5Qn/

possible duplicate of [Webkit border radius combined with css3 translate3D bleeding](http://stackoverflow.com/questions/14470796/webkit-border-radius-combined-with-css3-translate3d-bleeding) — Evan Mulawski, Jun 25 '13 at 15:07
@EvanMulawski it doesn't help, try it yourself, its hides after border. — Artem Svirskyi, Jun 25 '13 at 15:09
this is a bug in webkit: http://code.google.com/p/android/issues/detail?id=25499 — Chtioui Malek, Jun 25 '13 at 15:14

score 5 · Answer 1 · answered May 30 '16 at 10:30

5

Accually, you can just put

transform: translate3d(0,0,0);

On your element that needs the overflow + border-radius combo...

answered May 30 '16 at 10:30

curly_brackets

5,491
15
58
102

vals · Answer 2 · 2013-06-25T21:35:29.070

Since you are not using the z in the translate, you can change it to translate2d, that does work:

demo

.scroller{
width: 300px;
height: 500px;
border: 3px solid red;
border-radius: 30px;
overflow: hidden;
}
.scroller-content{
width: 300px;
height: 300px;
background: green;
-webkit-transform: translate(0, -8px);
}

This is documented in the link that Chtiwi Malek provided, but there it states that is only for mobile browser, and I have this issue in desktop.

edit

It also works (at least in desktop) if you set overflow and transform in the same element

.scroller{
    width: 300px;
    height: 500px;
    border: 3px solid red;
    border-radius: 30px;
    overflow: hidden;   
    -webkit-transform: translate3d(0, -8px, 5px);
}
.scroller-content{
    width: 300px;
    height: 300px;
    background: green;
}

Like vals mentions, just set a small translate3d on the container to make overflow:hidden work. I used transform: translate3d(0, 0, -1px); — Simon Epskamp, Aug 28 '13 at 19:31

overflow hidden with border-radius and translate3d

2 Answers2