Bug 103166

Summary: Overlay scrollbars are drawn underneath canvas elements on OS X Lion
Product: WebKit Reporter: evan.exe
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: ap, bdakin, simon.fraser
Priority: P2 Keywords: InRadar
Version: 528+ (Nightly build)   
Hardware: Mac   
OS: OS X 10.8   
Attachments:
Description Flags
html page with bug none

evan.exe
Reported 2012-11-23 19:04:49 PST
Created attachment 175844 [details] html page with bug Open the attached page in WebKit Nightly. The scrollbars are drawn as expected on the left (a div) but are not drawn correctly on the right (a canvas). The scrollbars can still be dragged with the mouse but there is no visual indication of this for the user when their mouse is over the canvas element. I'm not sure but this might be related to bug 77445. One possible workaround is to use WebKit-specific CSS on Lion to disable overlay scrollbars.
Attachments
html page with bug (894 bytes, text/html)
2012-11-23 19:04 PST, evan.exe 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Alexey Proskuryakov
Comment 1 2012-11-23 23:27:04 PST
> Open the attached page in WebKit Nightly Are you saying that this works correctly in Safari 6.0.2, but not in nightlies? I don't have a Lion machine here to check myself.
evan.exe
Comment 2 2012-11-24 09:27:22 PST
It also doesn't work correctly in Safari 6.0.2 and Chrome.
Simon Fraser (smfr)
Comment 3 2012-11-26 11:41:20 PST
This is because the canvases are in compositing layers. We need to make sure that the scrollbars get their own layers in this scenario.
Simon Fraser (smfr)
Comment 4 2012-11-26 11:41:34 PST
<rdar://problem/12751304>
evan.exe
Comment 5 2013-03-18 16:37:58 PDT
Just found a workaround: add "-webkit-transform:translateZ(0)" to the element with "overflow:scroll".
Note You need to log in before you can comment on or make changes to this bug.