1428263 - Incorrect layout (position) for position:fixed child of transformed scrollable flex container

Status: RESOLVED DUPLICATE of bug 1498873

(Core :: Layout, defect, P3)

Description

[Karl Dubost💡 :karlcow]

This is a spin-off of https://webcompat.com/issues/7303


Important:
Firefox on Android + Google Chrome UA.
(this makes it possible to trigger the UI chrome is receiving)


Steps to Reproduce

    1. Navigate to: www.drive.google.com
    2. Tap the Hamburger button. Observe the "Get the Google Drive app" overlay.

Expected Behavior:
The "Get the Google Drive app" overlay is displayed.

Actual Behavior:
The "Get the Google Drive app" overlay is not displayed.



The markup
<div class="a-s-tb-sc-Ja-Q a-s-tb-sc-Ja-Q-Nm a-s-tb-Pe-Q ">
    <div class="a-s-tb-sc-Ja-Q-x a-s-tb-Pe-Q">
        <div>
            <div class="a-N-Sf-rb-Fa-dp"></div>
            <div class="a-N-Sf-rb-Fa">
                <svg width="32" height="32" viewBox="0 0 64 64"
                    version="1.1" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink">
                    <defs>
                        <linearGradient x1="25.3225549%"
                            y1="50.1171875%" x2="100.674703%"
                            y2="97.5%" id="linearGradient-1">
                            <stop stop-color="#1A237E"
                                stop-opacity="0.2" offset="0%"></stop>
                            <stop stop-color="#1A237E"
                                stop-opacity="0.02" offset="100%"></stop>
                        </linearGradient>
                        <polygon id="path-2" points="0.949 13.48 33.051 13.48 40.552 0.168 8.662 0.168"></polygon>

<!--long SVG cut -->
                </svg>
                <div class="a-N-Sf-rb-Fa-ga">Get the Google Drive app</div>
            </div>
        </div>
    </div>
</div>


The CSS

.a-N-Sf-rb-Fa {
	background-color: #f5f5f5;
	bottom: 0;
	color: #4285f4;
	/* display: -webkit-box; */
	/* display: -moz-box; */
	/* display: -webkit-flex; */
	/* display: -ms-flexbox; */
	display: flex;
	font-size: 14px;
	height: 50px;
	position: fixed;
	width: 100%;
}

I found something interesting.
if we deactivate in the devtools "position: fixed" and reactivate it. Finally the right layout is being triggered for this box.

See screenshots on the webcompat.com issue.

Comment 1

[Karl Dubost💡 :karlcow]

adding Daniel because of flexbox-y stuff, but maybe not related.

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Here's a reduced testcase.
In Chrome, the yellow box with text is snapped to the bottom-right of .container (the black bordered box).
In Firefox, it's snapped to the bottom right of the viewport (but it moves to match Chrome if I dynamically disable/reenable the position:fixed style in devtools).

Comment 3

[Daniel Holbert [:dholbert]]

Edge 16 and Safari 11 (latest versions) both match Chrome on the attached testcase, FWIW.  (Not too surprising, since we match as well, but just need a dynamic tweak to do so.)

I'll bet this is related to the abspos weirdness in bug 1386654 (and its dependent-bug 1417293). (Though this one manifests slightly differently, because in this case here, a page-resize isn't sufficient to fix the problem.)

Comment 4

[Jet Villegas (inactive)]

[ Triage 2017/02/20: P3 ]

Comment 5

[Firefox Bug Husbandry Bot]

Migrating Webcompat whiteboard priorities to project flags. See bug 1547409.

Comment 6

[Firefox Bug Husbandry Bot]

See bug 1547409. Migrating whiteboard priority tags to program flags.

Comment 7

[Hiroyuki Ikezoe (:hiro)]

Is this still an issue? I don't see the yellow box in the test case in comment 2 is attached to the viewport.

Comment 8

[Hiroyuki Ikezoe (:hiro)]

Daniel? ^

Comment 9

[Daniel Holbert [:dholbert]]

Seems to be fixed. Fix range (using "testcase 1"):
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=7f9d03c29a6ffd82c1b5e17c14e27a2ae9d64434&tochange=b77bde54527692f87c31a60112d3cb57ec13298e

--> dupe of bug 1498873, I suppose (or fixed by it)

I verified that the original STR are fixed in Firefox Nightly on Android, too (visiting drive.google.com w/ Chrome-for-Android UA in Firefox-Nightly-on-Android.)