Bug 193192

Summary: [css-sticky] sticky canvas obscures scrollbars of (flexbox?) parent
Product: WebKit Reporter: Andy E <andyearnshaw>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: bfulgham, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
Self-contained example none

Andy E
Reported 2019-01-07 01:44:24 PST
Created attachment 358488 [details] Self-contained example Open the attached HTML file. You will see a canvas element with a grid drawn on it. The canvas is a sticky-positioned child of a container, set to 100% width and height, with another element in the flex flow that sets an artificial scroll area for the canvas. When you hover over the canvas and scroll, you cannot see the scrollbars on either axis until you reach the over-scroll point. When the canvas is not sticky and is instead contained within a sticky div, the problem goes away. NOTE: the only way I could achieve this kind of sticky positioning was to use a container with `display: flex`, as WebKit does not respect `position: sticky` on a parent that has `overflow: auto`. Therefore, I'm unsure as to whether flexbox is part of the issue.
Attachments
Self-contained example (2.60 KB, text/html)
2019-01-07 01:44 PST, Andy E 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Simon Fraser (smfr)
Comment 1 2019-01-07 12:42:58 PST
I think this is more generically about composited elements overlapping scrollbars.
Radar WebKit Bug Importer
Comment 2 2019-01-07 12:43:27 PST
<rdar://problem/47093278>
Note You need to log in before you can comment on or make changes to this bug.