193192 2019-01-07 01:44:24 -0800 [css-sticky] sticky canvas obscures scrollbars of (flexbox?) parent 2019-01-07 12:43:27 -0800 1 1 1 Unclassified WebKit Layout and Rendering Safari Technology Preview Unspecified Unspecified NEW InRadar P2 Normal --- 1 andyearnshaw webkit-unassigned bfulgham simon.fraser webkit-bug-importer zalan oldest_to_newest 1492220 0 358488 andyearnshaw 2019-01-07 01:44:24 -0800 Created attachment 358488 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. 1492350 1 simon.fraser 2019-01-07 12:42:58 -0800 I think this is more generically about composited elements overlapping scrollbars. 1492351 2 webkit-bug-importer 2019-01-07 12:43:27 -0800 <rdar://problem/47093278> 358488 2019-01-07 01:44:24 -0800 2019-01-07 01:44:24 -0800 Self-contained example nativescrollbars.html text/html 2659 andyearnshaw PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0idXRmLTgi PgogICAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgICAgI3dyYXBwZXIgewogICAgICAgIHBv c2l0aW9uOiBhYnNvbHV0ZTsKICAgICAgICB3aWR0aDogNTAwcHg7CiAgICAgICAgaGVpZ2h0OiAz MDBweDsKICAgICAgICBvdmVyZmxvdzogYXV0bzsKICAgICAgICBiYWNrZ3JvdW5kOiB3aGl0ZTsK ICAgICAgICB0b3A6IGNhbGMoNTAlIC0gMTUwcHgpOwogICAgICAgIGxlZnQ6IGNhbGMoNTAlIC0g MjUwcHgpOwogICAgICAgIGRpc3BsYXk6IGZsZXg7CiAgICAgIH0KCiAgICAgICNjYW52YXMgewog ICAgICAgIHBvc2l0aW9uOiAtd2Via2l0LXN0aWNreTsKICAgICAgICBwb3NpdGlvbjogc3RpY2t5 OwogICAgICAgIHRvcDogMDsKICAgICAgICBsZWZ0OiAwOwogICAgICAgIGJvdHRvbTogMDsKICAg ICAgICByaWdodDogMDsKICAgICAgICB3aWR0aDogMTAwJTsKICAgICAgICBoZWlnaHQ6IDEwMCU7 CiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogbGlnaHRibHVlOwogICAgICB9CgogICAgPC9zdHls ZT4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGlkPSJ3cmFwcGVyIj4KICAgICAgPGNhbnZh cyBpZD0iY2FudmFzIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjMwMCI+PC9jYW52YXM+CiAgICAgIDxk aXYgaWQ9ImlubmVyIj48ZGl2IGlkPSJpbm5lcmlubmVyIj48L2Rpdj48L2Rpdj4KICAgIDwvZGl2 PgoKICAgIDxzY3JpcHQ+CiAgICAgIGNvbnN0IGN0eCA9IGNhbnZhcy5nZXRDb250ZXh0KCcyZCcp OwogICAgICBjb25zdCByb3dIZWlnaHQgPSAzMjsKICAgICAgY29uc3QgY29sV2lkdGggPSAxMDA7 CiAgICAgIGNvbnN0IG51bVJvd3MgPSAxMDA7CiAgICAgIGNvbnN0IG51bUNvbHMgPSAxMDA7CiAg ICAgIGNvbnN0IHJvd3NQZXJWaWV3ID0gY2FudmFzLmhlaWdodCAvIHJvd0hlaWdodDsKICAgICAg Y29uc3QgY29sc1BlclZpZXcgPSBjYW52YXMud2lkdGggLyBjb2xXaWR0aDsKICAgICAgbGV0IHJl bmRlcmluZyA9IGZhbHNlOwoKICAgICAgY3R4LmZpbGxTdHlsZSA9ICdibHVlJzsKICAgICAgY3R4 LnN0cm9rZVN0eWxlID0gJ2dyYXknOwogICAgICBjdHguZm9udCA9ICcxMnB4IFZlcmRhbmEnOwog ICAgICBjdHgudHJhbnNsYXRlKDAuNSwgMC41KTsKCiAgICAgIGlubmVyLnN0eWxlLmhlaWdodCA9 IGAke3Jvd0hlaWdodCAqIG51bVJvd3MgKyAxfXB4YDsKICAgICAgaW5uZXJpbm5lci5zdHlsZS53 aWR0aCA9IGAke2NvbFdpZHRoICogbnVtQ29scyArIDF9cHhgOwoKICAgICAgaWYgKHdyYXBwZXIu c2Nyb2xsV2lkdGggPiBpbm5lcmlubmVyLm9mZnNldFdpZHRoKSB7CiAgICAgICAgaW5uZXJpbm5l ci5zdHlsZS53aWR0aCA9IGAkeyhjb2xXaWR0aCAqIG51bUNvbHMgKyAxKSAtIHdyYXBwZXIub2Zm c2V0V2lkdGh9cHhgOwogICAgICB9CgogICAgICBmdW5jdGlvbiBkcmF3Q2VsbHMoKSB7CiAgICAg ICAgcmVuZGVyaW5nID0gZmFsc2U7CiAgICAgICAgY3R4LmNsZWFyUmVjdCgwLCAwLCBjYW52YXMu d2lkdGgsIGNhbnZhcy5oZWlnaHQpOwoKICAgICAgICBjb25zdCB7IHNjcm9sbFRvcCwgc2Nyb2xs TGVmdCB9ID0gd3JhcHBlcjsKCiAgICAgICAgZm9yIChsZXQgaSA9IDA7IGkgPD0gcm93c1BlclZp ZXc7IGkrKykgewogICAgICAgICAgY29uc3Qgcm93ID0gTWF0aC5mbG9vcihzY3JvbGxUb3AgLyBy b3dIZWlnaHQpICsgaTsKICAgICAgICAgIGNvbnN0IHJvd09mZnNldCA9IChyb3dIZWlnaHQgLSAo c2Nyb2xsVG9wICUgcm93SGVpZ2h0KSkgKyAoKGkgLTEpICogcm93SGVpZ2h0KTsKCiAgICAgICAg ICBpZiAocm93IDwgMCB8fCByb3cgKyAxID4gbnVtUm93cykgewogICAgICAgICAgICBjb250aW51 ZTsKICAgICAgICAgIH0KCiAgICAgICAgICBmb3IgKGxldCBqID0gMDsgaiA8PSBjb2xzUGVyVmll dzsgaisrKSB7CiAgICAgICAgICAgIGNvbnN0IGNvbCA9IE1hdGguZmxvb3Ioc2Nyb2xsTGVmdCAv IGNvbFdpZHRoKSArIGo7CiAgICAgICAgICAgIGNvbnN0IGNvbE9mZnNldCA9IChjb2xXaWR0aCAt IChzY3JvbGxMZWZ0ICUgY29sV2lkdGgpKSArICgoaiAtIDEpICogY29sV2lkdGgpOwoKICAgICAg ICAgICAgaWYgKGNvbCA8IDAgfHwgY29sICsgMSA+IG51bUNvbHMpIHsKICAgICAgICAgICAgICBj b250aW51ZTsKICAgICAgICAgICAgfQoKICAgICAgICAgICAgY3R4LnN0cm9rZVJlY3QoY29sT2Zm c2V0LCByb3dPZmZzZXQsIGNvbFdpZHRoLCByb3dIZWlnaHQpOwogICAgICAgICAgICBjdHguZmls bFRleHQoYENlbGwgJHtyb3d9LCR7Y29sfWAsIGNvbE9mZnNldCArIDEwLCByb3dPZmZzZXQgKyAy Mik7CiAgICAgICAgICB9CiAgICAgICAgfQogICAgICB9CiAgICAgIGRyYXdDZWxscygpOwoKICAg ICAgd3JhcHBlci5hZGRFdmVudExpc3RlbmVyKCdzY3JvbGwnLCAoKSA9PiB7CiAgICAgICAgaWYg KCFyZW5kZXJpbmcgJiYgd3JhcHBlci5zY3JvbGxUb3AgPj0gMCAmJiB3cmFwcGVyLnNjcm9sbFRv cCA8PSBpbm5lci5vZmZzZXRIZWlnaHQpIHsKICAgICAgICAgIHJlbmRlcmluZyA9IHRydWU7CiAg ICAgICAgICByZXF1ZXN0QW5pbWF0aW9uRnJhbWUoZHJhd0NlbGxzKTsKICAgICAgICB9CiAgICAg IH0pOwogICAgPC9zY3JpcHQ+CiAgPC9ib2R5Pgo8L2h0bWw+Cg==