Bug 213738 – REGRESSION(r260276) Z-ordering issue with content inside overflow:scroll element with negative y translate

• Status: NEW
• Component: Layout and Rendering

[Philipp Metzler]

Created attachment 403071 [details]
Actual behavior on Mobile Safari 13 without the text "Hello world!"

Steps to reproduce:

1. On macOS 10.15.5 (macOS Catalina) open Safari Technology Preview Release 109 (Safari 14.0, WebKit 15610.1.17.2)
2. Go go this website: https://codepen.io/googol7/full/KKVvzVX
3. Resize the height of the Safari window to at least 946px
3. You see the text "Hello world!"
4. Resize the height of the Safari window to less than 946px.
5. You cannot see the text "Hello world!" anymore.

This faulty behavior can also be seen on Mobile Safari 13 on iOS 13.5.1 with an iPhone X for example.

In other browsers the text "Hello world!" can be seen also if the height of the window is very small.

The problem cannot be reproduced under macOS Catalina 10.15.5 (19F101) in these browsers:
- Safari Version 13.1.1 (15609.2.9.1.2)
- Google Chrome Version 83.0.4103.116 (Offizieller Build) (64-Bit)
- Firefox 77.0.1 (64-Bit)
- Opera 68.0.3618.173
- Microsoft Edge 83.0.478.56 (Offizielles Build) (64-Bit)

All of these browsers display the text "Hello world!" at any time - independent of the height of the window.

[zalan]

Regressed at https://trac.webkit.org/changeset/260276/webkit (Turn async frame and overflow scrolling on by default on macOS)

[Radar WebKit Bug Importer]

<rdar://problem/64893598>

[Philipp Metzler]

(In reply to zalan from comment #1)
> Regressed at https://trac.webkit.org/changeset/260276/webkit (Turn async
> frame and overflow scrolling on by default on macOS)

Zalan, this will not solve the problem in Mobile Safari, correct?

[zalan]

(In reply to Philipp Metzler from comment #3)
> (In reply to zalan from comment #1)
> > Regressed at https://trac.webkit.org/changeset/260276/webkit (Turn async
> > frame and overflow scrolling on by default on macOS)
> 
> Zalan, this will not solve the problem in Mobile Safari, correct?
Yeah, I don't know what the regression point is on iOS. I'd guess the same bug causes it on both platforms (which got revealed on macOS with 260276). Simon will probably have more information on this soon.

[Simon Fraser (smfr)]

Created attachment 403209 [details]
Reduction

[Simon Fraser (smfr)]

We get the z-ordering wrong; the 'position: absolute' ends up on top of the text, but only if there's a translation on the scroller. It's a fairly obscure combination of properties.

[Maciej Stachowiak]

Are there any known websites or apps that this affects?

[Philipp Metzler]

Created attachment 406325 [details]
Leaflet map controls disappear

In our PWA this bug leads to the disappearance of the map controls. See the animated gif "Leaflet map controls dissapear.gif"

[Simon Fraser (smfr)]

Can you work around it by removing the negative y translate on the scroller?

[Philipp Metzler]

No that doesn't work for me. We need this for the animations. In other browsers this is not a problem.

Created attachment 407103 [details]
Cut off circle

I've seen another bug after removing the `translateY` of the parent node. A circle is cut off when scrolling down.

Environment: Simulator with iOS 13.6 iPhone SE (2nd generation)

Reproduction: https://codepen.io/amann/pen/GRZrwMr