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:
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:
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.