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/
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.
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?
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.
Yes, this issue remains on IOS8 and OS X Yosemite. Please fix this ASAP.
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).
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?
*** This bug has been marked as a duplicate of bug 68196 ***
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/
I see rounded corners in that example. Are you testing in a recent Safari Tech Preview?
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?
(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.
I’ll do it, thanks Simon.