98538 2012-10-05 11:20:02 -0700 overflow: hidden + border radius does not work when transform is added to child 2023-05-16 15:31:37 -0700 1 1 1 Unclassified WebKit CSS 525.x (Safari 3.2) Unspecified Unspecified RESOLVED DUPLICATE 68196 P2 Normal --- 1 drackett webkit-unassigned ahmad.saleem792 bmcouto dtrebbien mail simon.fraser skowronkow oldest_to_newest 735799 0 drackett 2012-10-05 11:20:02 -0700 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/ 797030 1 dtrebbien 2012-12-24 11:35:14 -0800 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. 798123 2 dtrebbien 2012-12-29 05:33:16 -0800 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? 1028280 3 mail 2014-08-11 12:50:52 -0700 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. 1042362 4 bmcouto 2014-10-17 04:59:00 -0700 Yes, this issue remains on IOS8 and OS X Yosemite. Please fix this ASAP. 1063786 5 simon.fraser 2015-01-23 15:19:50 -0800 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). 1935290 6 ahmad.saleem792 2023-02-20 15:26:24 -0800 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? 1935305 7 simon.fraser 2023-02-20 15:41:49 -0800 *** This bug has been marked as a duplicate of bug 68196 *** 1955469 8 skowronkow 2023-05-15 12:08:08 -0700 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/ 1955504 9 simon.fraser 2023-05-15 14:56:26 -0700 I see rounded corners in that example. Are you testing in a recent Safari Tech Preview? 1955598 10 skowronkow 2023-05-15 23:05:12 -0700 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? 1955691 11 simon.fraser 2023-05-16 09:48:32 -0700 (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. 1955772 12 skowronkow 2023-05-16 15:31:37 -0700 I’ll do it, thanks Simon.