Bug 213738

Summary:

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

Product:

WebKit

Reporter:

Philipp Metzler <pp>

Component:

Layout and Rendering

Assignee:

Simon Fraser (smfr) <simon.fraser>

Status:

NEW ---

Severity:

Normal

CC:

bfulgham, jan, mjs, pp, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Safari Technology Preview

Hardware:

Mac

OS:

macOS 10.15

URL:

https://codepen.io/googol7/full/KKVvzVX

Attachments:

Description	Flags
Actual behavior on Mobile Safari 13 without the text "Hello world!"	none
Reduction	none
Leaflet map controls disappear	none
Cut off circle	none

Description Philipp Metzler 2020-06-29 09:24:55 PDT

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.

Comment 1 zalan 2020-06-29 09:30:53 PDT

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

Comment 2 Radar WebKit Bug Importer 2020-06-29 09:31:28 PDT

<rdar://problem/64893598>

Comment 3 Philipp Metzler 2020-06-29 09:45:03 PDT

(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?

Comment 4 zalan 2020-06-29 09:50:17 PDT

(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.

Comment 5 Simon Fraser (smfr) 2020-06-30 11:16:20 PDT

Created attachment 403209 [details]
Reduction

Comment 6 Simon Fraser (smfr) 2020-06-30 11:21:25 PDT

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.

Comment 7 Maciej Stachowiak 2020-08-10 13:19:05 PDT

Are there any known websites or apps that this affects?

Comment 8 Philipp Metzler 2020-08-10 13:38:31 PDT

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"

Comment 9 Simon Fraser (smfr) 2020-08-10 13:42:32 PDT

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

Comment 10 Philipp Metzler 2020-08-10 13:57:48 PDT

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

Comment 11 jan 2020-08-24 08:04:38 PDT

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