Bug 107853 – Inconsistent rendering of positioned elements under a parent with border radius and overflow: hidden

• Component: Layout and Rendering
• Status: RESOLVED CONFIGURATION CHANGED

[MBusby]

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.

[Robert Hogan]

Created attachment 185021 [details]
Reduction

[Ahmad Saleem]

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!