Webkit not respecting overflow:hidden with border radius

Question

I have a lovely Star Trek Red Alert animation using CSS3. One of my parent elements has a border-radius along with overflow:hidden so that any content is cropped to the shape of the border radius.

This all works fine in Firefox but Webkit browsers leave some child elements hanging outside the cropped area.

Here is my code:

http://jsfiddle.net/doublewombat/EqK6R/embedded/result/

The div with the class name curvedEdges has the border-radius and overflow:hidden. However the blocks left & right of the 'Alert' text hang outside of this radius, even though they are child elements of curvedEdges. Or in plain English, the left and right edges of the animation should be slightly curved (as in Firefox), not dead straight.

So is this a bug in Webkit, or have I got something wrong?

Here it is on YouTube if you don't have a Webkit browser handy...

http://www.youtube.com/watch?v=3vyVy21nWsE

Sorry, I can't say anything on the topic but WHAT A NICELY DONE CSS3-EXPERIMENT! Damn good! :-) — YMMD, Apr 25 '12 at 10:59
Thanks very much. It certainly is cool that this can be done without Javascript. — JohnW, Apr 25 '12 at 11:27

score 33 · Answer 1 · edited May 23 '17 at 11:54

33

Firstly, what a cool demo!

I had a look around and it seems a problem not on you are having. The second answer to someone else's problem fixed it for me, although this doesn't work for safari. The fix is to use masking:

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

The accepted answer to that same question has another fix, which I think could really help you out, but I couldn't seem to get the right combination of elements and border-radius.

edited May 23 '17 at 11:54

Community

1
1

answered Apr 25 '12 at 11:44

cchana

4,899
3
33
43

Interesting fix, although the Safari fail is the reason I'm not giving this the accepted answer. Thanks anyway though. – JohnW Apr 25 '12 at 12:04
Works in Safari 6.0.2 for me. – lakenen Feb 06 '13 at 06:39

score 17 · Answer 2 · answered Apr 19 '13 at 16:47

I'd been trying to do the same, and was using border-radius to mask elements to a circle.

I was able to use masking and a radial gradient to achieve the desired affect in Safari 6.0.3 (with transitions in position and size).

Here's the single line of code I added to the container (masking) element:

-webkit-mask-image: -webkit-radial-gradient(circle, white, black);

I thought I would have to use hard color stops, as follows, to get the hard edge:

-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);

However, it works the same without (perhaps someone can enlighten us on why). The clipping is not as smooth as with border-radius, but it beats the heck out of the image unpredictably exceeding the bounds.

You may need to adjust this for use with older versions of Safari/Chrome etc., I haven't tested it on different versions (aka YMMV).

The reason you don't need stops is because it's defaulting to an alpha mask, not a luminance mask. Your mask image is completely opaque hence it's a hard edge. You can soften it by using a fully opaque rbga stop at around 95% then fully transparent at 100%. — P_Dog, May 01 '15 at 07:32

Hugo Silva · Answer 3 · 2016-08-17T04:40:50.113

17

It appears to be a browser issue as reported on: https://code.google.com/p/chromium/issues/detail?id=157218

Basically, when you apply animation to an element, the browser will handle it in the GPU (Graphics Processing Unit) for performance reasons, while the rest is handled by the CPU. That ends up rendering the animation above the mask.

As a workaround you can try adding an imperceptible transform property, that will also trigger GPU handling for the mask element, promoting it to the same level of the animation:

#redAlert .curvedEdge {
    -webkit-transform: rotate(0.000001deg);
}

I guess it may vary depending on browser version, but these other values have also been reported to trigger GPU handling: rotate(0), translateZ(0)

edited Aug 17 '16 at 04:40

answered Aug 06 '13 at 13:43

Hugo Silva

6,748
3
25
42

Thank you for this lovely hack! – DerLola Dec 03 '14 at 10:54
1

Thankfully, `rotate(0)` also fixes it – V Maharajh Aug 12 '16 at 21:37

score 9 · Answer 4 · answered Mar 11 '14 at 14:44

9

It seems like its an issue with the GPU/hardware compositing. transform: translateZ(0); should fix the issue as well. For more information on this, read http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/

-webkit-transform: translateZ(0);
transform: translateZ(0);

I have included vendor prefixes but you can remove them if you want.

answered Mar 11 '14 at 14:44

Zander

2,471
3
31
53

Per usual, the good ol graphics accelerator not kicking in. This fixed the border-radius not being respected by overflow hidden. Not really shocking so much as disappointing. I am honestly considering using `* { -webkit-transform:translateZ(0);}`. – Travis J Nov 06 '17 at 20:41

nakrill · Answer 5 · 2014-05-19T10:48:06.943

4

Seems its a mixed working fix:

.wrap {
    -webkit-transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

http://jsfiddle.net/qWdf6/82/

edited May 19 '14 at 10:48

answered May 19 '14 at 10:30

nakrill

720
6
7

Thanks. I have spent day trying solutions and finding minimal example for my derivate of the problem. This finally works – you are a hero! – Velda Sep 11 '17 at 11:50

score 2 · Accepted Answer · edited May 23 '17 at 12:01

2

You could put an absolute positioned div over it with a border-radius and a thick black border, it will block the parts you want too be hidden.

I made a demo for another question about a similar problem in FF3.6: http://jsfiddle.net/vfp3v/15/

border-radius; overflow: hidden, and text is not clipped

edited May 23 '17 at 12:01

Community

1
1

answered Apr 25 '12 at 11:42

Willem

5,364
2
23
44

Yep, I suspect this is probably the best workaround. Of course it does mean that I can no longer have a transparent background, but hey - you can't have everything. Thanks. – JohnW Apr 25 '12 at 12:08

score 1 · Answer 7 · answered Oct 10 '12 at 16:05

Just as a heads up, this fix only worked for me if I applied the mask on a container with border-radius, but no border. Ultimately I ended up with something like this:

<div style="border-radius: 15px; border: 1px solid red;">
    <div style="border-radius: 15px; overflow: hidden; -webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);">
        <span style="position: relative; left; -20px;">Some stuff that overflows.</span>
    </div>
</div>

With a border on the inner div, the clipping wasn't perfect.

Totally weird.

score 1 · Answer 8 · answered Feb 06 '13 at 21:01

I found another possible solution to this bug, using CSS3 clip-path, but it only works in recent versions of webkit (it seems to work in Chrome 24, but not Safari 6.0.2). The following will clip a circle around the element:

-webkit-clip-path: circle(50%, 50%, 100%);

Hopefully this will be implemented by more browsers soon! It seems like this feature could have a lot of cool applications. Here's a relevant blog post: http://blog.romanliutikov.com/coding/css-clip-path-landed-in-webkit/.

Webkit not respecting overflow:hidden with border radius

8 Answers8

Linked