RESOLVED CONFIGURATION CHANGED 107853
Inconsistent rendering of positioned elements under a parent with border radius and overflow: hidden 
https://bugs.webkit.org/show_bug.cgi?id=107853
Summary Inconsistent rendering of positioned elements under a parent with border radi...
MBusby
Reported 2013-01-24 12:01:26 PST
1. Create an element with a border-radius and overflow:hidden with a set size. 2. Create a child element under it with a size equal or larger than the parent. Set relative or absolute positioning on that child. 3. Element will appear to render normally, but any changes occuring on that child element or below will cause the overflow clipping to ignore the border radius. Simple test: Elements set up as mentioned, background-color changes on :hover. http://jsfiddle.net/aubVL/1/ Tested on: OSX Safari 6.0.2 Windows Safari w/ Webkit Nightly r131444 Chrome 24.0.1312.56 m Chrome 26.0.1393.0 canary Temporary workaround: Set "border: 1px solid transparent;" Unfortunately for me this fix seems to incur rendering issues in my particular case (where the child elements include multiple layers of iframes, overflow:hidden elements, and transforms), so it of no use.
Attachments
Reduction (502 bytes, text/html)
2013-01-28 11:24 PST, Robert Hogan 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Robert Hogan
Comment 1 2013-01-28 11:24:28 PST
Created attachment 185021 [details] Reduction
Ahmad Saleem
Comment 2 2022-09-24 09:50:27 PDT
I am unable to reproduce this bug using attached testcase and JSFiddle from Comment 0 while using Safari 0 and on hover, there is no issue in the new element not respecting "border-radius" and it is working similar to all other browsers (Chrome Canary 108 and Firefox Nightly 107). I am marking this as "RESOLVED CONFIGURATION CHANGED". In case, if this is reproducible then please share updated example. Thanks!
Note You need to log in before you can comment on or make changes to this bug.