Bug 98538

Summary: overflow: hidden + border radius does not work when transform is added to child
Product: WebKit Reporter: Chris Drackett <drackett>
Component: CSSAssignee: Nobody <webkit-unassigned>
Severity: Normal CC: ahmad.saleem792, bmcouto, dtrebbien, mail, simon.fraser, skowronkow
Priority: P2    
Version: 525.x (Safari 3.2)   
Hardware: Unspecified   
OS: Unspecified   

Description Chris Drackett 2012-10-05 11:20:02 PDT
I have the following code to provide a mask to a child element on my page:


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


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

Comment 1 Daniel Trebbien 2012-12-24 11:35:14 PST


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.
Comment 2 Daniel Trebbien 2012-12-29 05:33:16 PST
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?
Comment 3 Klaus Reinfeld 2014-08-11 12:50:52 PDT
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.
Comment 4 Bruno Couto 2014-10-17 04:59:00 PDT
Yes, this issue remains on IOS8 and OS X Yosemite. Please fix this ASAP.
Comment 5 Simon Fraser (smfr) 2015-01-23 15:19:50 PST
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).
Comment 6 Ahmad Saleem 2023-02-20 15:26:24 PST
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?
Comment 7 Simon Fraser (smfr) 2023-02-20 15:41:49 PST

*** This bug has been marked as a duplicate of bug 68196 ***
Comment 8 coderitual 2023-05-15 12:08:08 PDT
Hey, I think the bug is still there. I am able to reproduce it by changing initial fiddle. Here is the bug still present: 

Comment 9 Simon Fraser (smfr) 2023-05-15 14:56:26 PDT
I see rounded corners in that example. Are you testing in a recent Safari Tech Preview?
Comment 10 coderitual 2023-05-15 23:05:12 PDT
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?
Comment 11 Simon Fraser (smfr) 2023-05-16 09:48:32 PDT
(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.
Comment 12 coderitual 2023-05-16 15:31:37 PDT
I’ll do it, thanks Simon.