overflow: hidden + border radius does not work when transform is added to child

• Component: CSS
• Status: RESOLVED DUPLICATE

[Chris Drackett]

I have the following code to provide a mask to a child element on my page:

http://jsfiddle.net/hWCZ7/

However, when I apply a transform to the child element, the overflow is no longer hidden in a way that respects the border radius:

http://jsfiddle.net/hWCZ7/1/

Its a little worse with a 3D transform as well:

http://jsfiddle.net/hWCZ7/2/

[Daniel Trebbien]

Related:

http://stackoverflow.com/questions/12521870/webkit-issue-with-the-parents-curved-border-not-clipping-children-undergoing-an

The provided work-around, demonstrated at http://jsfiddle.net/pv2dc/2/ , still works in Safari 6.0.2, but I recently noticed that it no longer works in the latest version of Chrome for Mac, 23.0.1271.101.

It looks like this issue, in the case of a 2D transform, is a recent regression.

[Daniel Trebbien]

Testing against http://jsfiddle.net/hWCZ7/1/ this issue in the case of a 2D transform was a temporary regression occurring somewhere in (r136242, r136298).  Because the latest version of Chrome, 23.0.1271.101, was built with WebKit @136278, this issue in the case of a 2D transform should correct itself with the next version of Chrome.

I have tested the latest nightly, r138561, as well as nightlies at various other revisions (r138461, r137986, r137862, r136298, r136242, r135851, r135516, r134433, and r130495) and I have not seen the issue demonstrated by http://jsfiddle.net/hWCZ7/1/

WebKit devs:  I would like to add a test for http://jsfiddle.net/hWCZ7/1/.  Can anyone offer some tips as to the best way to do this?  E.g. Would using an "expected image" work well or is this a bad idea because of slight antialiasing differences?

[Klaus Reinfeld]

Still buggy in all today available Safari versions (even in iOS 8 and OSX 10.10)!

Chrome, Firefox and IE are fine today, only Safari is left.

[Bruno Couto]

Yes, this issue remains on IOS8 and OS X Yosemite. Please fix this ASAP.

[Simon Fraser (smfr)]

This is the same as bug 140535.

You can work around it in recent builds by making the element with overflow:hidden into a stacking context (e.g. position:relative, z-index:0).

[Ahmad Saleem]

https://jsfiddle.net/hWCZ7/2/ - now works same in STP163 as Chrome Canary 112. At least, it looks to me.

As for http://jsfiddle.net/hWCZ7/1/, it also looks similar in STP163 and Chrome Canary 112.

Even testcase from StackOverflow now works fine - https://jsfiddle.net/pv2dc/

@Simon - Appreciate if you can guide, if I am testing this wrong and unable to see difference or is it fixed and we can close this now?

[Simon Fraser (smfr)]

*** This bug has been marked as a duplicate of bug 68196 ***

[coderitual]

Hey, I think the bug is still there. I am able to reproduce it by changing initial fiddle. Here is the bug still present: 

https://jsfiddle.net/vsp1fca2/4/

[Simon Fraser (smfr)]

I see rounded corners in that example. Are you testing in a recent Safari Tech Preview?

[coderitual]

hey Simon, yes I am testing using safari tech preview (169). I see rounded corners but there are artefacts around them. Sorry, I thought that it's related to this, but maybe it is separate issue?

[Simon Fraser (smfr)]

(In reply to coderitual from comment #10)
> hey Simon, yes I am testing using safari tech preview (169). I see rounded
> corners but there are artefacts around them. Sorry, I thought that it's
> related to this, but maybe it is separate issue?

Looks like a different issue. Please file a new bug.

[coderitual]

I’ll do it, thanks Simon.