Bug 203681 – Canvas layer not correct when -webkit-overflow-scrolling is set to touch on iOS 13

• Component: New Bugs
• Status: NEW

[Yi Shen]

Created attachment 382463 [details]
Demo to reproduce

Hi, I'm one of the maintainer of Apache ECharts(incubating). It uses Canvas to draw charts.

Recently a lot of our developers report to us, when running ECharts on iOS 13, Canvas in the container will cover the tooltip, which is a DIV and has larger z-index compared to canvas.
Apparently they are having wrong layers.

We found it only happens when -webkit-overflow-scrolling of top container is set to touch
It seems this property has been eliminated since iOS 13 https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes 



index.html in the attachment is a minimal reproducible page. 

Step to reproduce:
Open the index.html in attachment on iOS 13.

Expected result:
Black DIV should be on top of the red triangle, which is drawn by Canvas.

Actual result:
Red triangle is on top of the black DIV.

[Radar WebKit Bug Importer]

<rdar://problem/56808427>

[Simon Fraser (smfr)]

Are you seeing this on iPhone or iPad? The z-ordering side effects of -webkit-overflow-scrolling: touch differ (because iPad gets desktop content).

[Yi Shen]

Hi, we were testing it on iPhone. Haven't tested iPad.

[Simon Fraser (smfr)]

There should be no behavior change between iOS 12 and 13 on iPhone.