Bug 213712 – REGRESSION(r260276): menu items in footer of https://salo.ai are invisible until you hover or resize

• Component: Compositing
• Status: RESOLVED FIXED

[Jon Lee]

On Big Sur betas or the latest STP, try

1. Loading salo.ai.
2. Scroll to the bottom. Notice that the footer is all white.
3. Mouse over the footer. Links appear.
4. Resize horizontally the window. The footer appears.

[alan]

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/64893190>

[Simon Fraser (smfr)]

I can reproduce.

[Simon Fraser (smfr)]

There's some overflow scrolling, negative z-index and backing sharing here:

@supports not (-webkit-overflow-scrolling: touch) {
    body:not(.minimized-header) > div {
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        perspective: 1px;
        perspective-origin:0 0
    }

    body:not(.minimized-header) > div > header::before {
        transform-origin: 0 0;
        transform:translateZ(-1px) scale(2)
    }
}


S---------C-c-- -- ------ ------ 2 2 0x19025a5c0 (0,0) width=1137 height=1195 (layerID 16) {sc 2} RenderView 0x193345230
S-----------c-- -- ------ ------ 2 2   + 0x1902232e0 (0,0) width=1137 height=1196 RenderBlock 0x1933456e0 HTML 0x193345530
S-O---T---C-c-- -- ------ ------ 2 3     + 0x193c65a10 (0,0) width=1137 height=1196 (layerID 25) {sc 3} RenderBlock 0x1933da9a0 DIV 0x1933a8180
S-----T---C--s- -- ------ ------ 3 3       - 0x193c65b80 (0,-3774) width=1137 height=598 (layerID 21) RenderBlock (positioned) 0x1933f4240 <pseudo> 0x1933d8dd0
-------------s- -- ------ ------ 3 3       + 0x193c65cf0 (0,-3774) width=1137 height=598 RenderFlexibleBox 0x1933dab70 DIV 0x1933a8200
----------CP-s- -- ------ ------ 3 3       + 0x193c65e60 (0,-3176) width=1137 height=4041 (layerID 70) overlap RenderBlock (relative positioned) 0x1933f4480 MAIN 0x1933b3150
-----------p-s- -- ------ ------ 3 3       + 0x193c5f000 (0,-56.84) width=1137 height=57 RenderBlock (positioned) 0x1933f45a0 <pseudo> 0x1933d8e70
-----------p-s- -- ------ ------ 3 3       + 0x193c5f170 (178.50,410) width=360 height=240 RenderBlock (relative positioned) 0x1933f4ea0 DIV 0x1933a8280 class='image'
-----------p-s- -- ------ ------ 3 3       + 0x193c5f2e0 (46.80,-7.19) width=100 height=100 RenderBlock (positioned) 0x1933f4fc0 DIV 0x1933a8300
-----------p-s- -- ------ ------ 3 3       + 0x193c5f450 (11.50,12) width=70 height=70 RenderImage 0x1933db1f0 IMG 0x1933b3780
S-----T----p-s- -- ------ ------ 3 3       + 0x193c5f5c0 (578.50,1020) width=380 height=240 RenderBlock (relative positioned) 0x1933f5560 DIV 0x1933a8400 class='image'
S-----T------st -- ------ ------ 3 3         + 0x193c5f730 (80,0) width=240 height=240 RenderImage 0x1933db4e0 IMG 0x1933b3a50
-------------st -- ------ ------ 3 3         + 0x193c5f8a0 (262.19,-7.19) width=100 height=100 RenderBlock (positioned) 0x1933f5680 DIV 0x1933a8480
S-----T------st -- ------ ------ 3 3         + 0x193c5fa10 (11.50,12) width=70 height=70 RenderImage 0x1933db630 IMG 0x1933b3b70
-----------p-s- -- ------ ------ 3 3       + 0x193c5fb80 (178.50,1664) width=360 height=240 RenderBlock (relative positioned) 0x1933f5c20 DIV 0x1933a8580 class='image'
-----------p-s- -- ------ ------ 3 3       + 0x193c5fcf0 (46.80,-7.19) width=100 height=100 RenderBlock (positioned) 0x1933f5d40 DIV 0x1933a8600
-----------p-s- -- ------ ------ 3 3       + 0x193c5fe60 (11.50,12) width=70 height=70 RenderImage 0x1933dba70 IMG 0x1933d8010
-----------p-s- -- ------ ------ 3 3       + 0x193c5c000 (0,2252) width=1137 height=455 RenderBlock (relative positioned) 0x1933f62e0 SECTION 0x1933d4180 id='learn-more'
-----------p-s- -- ------ ------ 3 3       + 0x193c5c170 (0,0) width=1137 height=455 RenderFlexibleBox 0x1933dbd60 A 0x1933cc5f0
-----------p-s- -- ------ ------ 3 3       + 0x193c5c2e0 (59,2868.80) width=150 height=75 RenderBlock (relative positioned) 0x1933f6be0 A 0x1933cc688
S------F---p-s- -- ------ ------ 3 3       + 0x193c5c450 (0,0) width=150 height=75 RenderImage 0x193974578 IMG 0x1933e0550
-----------p-s- -- ------ ------ 3 3       + 0x193c5c5c0 (249,2868.80) width=69 height=75 RenderBlock (relative positioned) 0x1933f6d00 A 0x1933cc720
S------F---p-s- -- ------ ------ 3 3       + 0x193c5c730 (0,0) width=69 height=75 RenderImage 0x193974690 IMG 0x1933e0660
-----------p-s- -- ------ ------ 3 3       + 0x193c5c8a0 (358,2868.80) width=150 height=75 RenderBlock (relative positioned) 0x1933f6e20 A 0x1933cc7b8
S------F---p-s- -- ------ ------ 3 3       + 0x193c5ca10 (0,0) width=150 height=75 RenderImage 0x1939747a8 IMG 0x1933e0770
-----------p-s- -- ------ ------ 3 3       + 0x193c5cb80 (548,2868.80) width=150 height=75 RenderBlock (relative positioned) 0x1933f6f40 A 0x1933cc850
S------F---p-s- -- ------ ------ 3 3       + 0x193c5ccf0 (0,0) width=150 height=75 RenderImage 0x1939748c0 IMG 0x1933e0880
-----------p-s- -- ------ ------ 3 3       + 0x193c5ce60 (738,2868.80) width=150 height=75 RenderBlock (relative positioned) 0x1933f7060 A 0x1933cc8e8
S------F---p-s- -- ------ ------ 3 3       + 0x193c59000 (0,0) width=150 height=75 RenderImage 0x1939749d8 IMG 0x1933e0990
-----------p-s- -- ------ ------ 3 3       + 0x193c59170 (928,2868.80) width=150 height=75 RenderBlock (relative positioned) 0x1933f7180 A 0x1933cc980
S------F---p-s- -- ------ ------ 3 3       + 0x193c592e0 (0,0) width=150 height=75 RenderImage 0x193974af0 IMG 0x1933e0aa0
-----------p-s- -- ------ ------ 3 3       + 0x193c595c0 (64.25,3852.30) width=300 height=99 RenderBlock (relative positioned) 0x1933f7de0 A 0x1933ccc78
-----------p-s- -- ------ ------ 3 3       + 0x193c59730 (418.50,3863.80) width=300 height=66 RenderBlock (relative positioned) 0x19398c120 A 0x1933ccd10
-----------p-s- -- ------ ------ 3 3       + 0x193c598a0 (772.75,3842.80) width=300 height=118 RenderBlock (relative positioned) 0x19398c240 A 0x1933ccda8
-----------p-s- -- ------ ------ 3 3       + 0x193c59a10 (0,4040.80) width=1137 height=57 RenderBlock (positioned) 0x19398c360 <pseudo> 0x1933d8f10
S-------XxC---- -- ------ ------ 2 2     + 0x193ca7e60 (0,0) width=1137 height=51 (layerID 26) stacking {vc 4} RenderFlexibleBox 0x1933d9800 NAV 0x1933b2580 id='site-header' class='minimized'
S--------x----- -- ------ ------ 2 2       - 0x193c655c0 (0,0) width=240 height=30 RenderBlock (positioned) 0x1933d9c20 <pseudo> 0x1933d8d30
---------x----- -- ------ ------ 2 2       + 0x193c65000 (40,10) width=240 height=30 RenderBlock (relative positioned) 0x1933d99a0 A 0x1933b2610
S--A-----x----- -- ------ ------ 2 2       + 0x193c65450 (0,0) width=240 height=30 RenderImage 0x1933d9ad0 IMG 0x1933b26b0

[Simon Fraser (smfr)]

Created attachment 403247 [details]
Reduction

[Simon Fraser (smfr)]

This is about paint phases on the foreground layer.

[Simon Fraser (smfr)]

Created attachment 403386 [details]
Patch

[EWS]

Committed r263860: <https://trac.webkit.org/changeset/263860>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 403386 [details].

[Simon Fraser (smfr)]

*** Bug 213711 has been marked as a duplicate of this bug. ***