<div style="width:400px; height: 400px; overflow:scroll"> <div style="height:300px; background-color:blue"></div> <div style="height:300px; background-color:green"></div> </div> <div style="width:200px; height:200px; background-color:red; margin-top:-100px"></div> The red box should be on top of the scrollable area. It is in Chrome and Firefox but not in WebKit.
This is the "fundamental compositing bug" where the scroller becomes self-painting, so z-orders on top of the following element with negative margin.
Are there plans to fix it?
Our current compositing architecture makes this hard to fix in the short term. In the long term, yes.
<rdar://problem/96815353>