2017440 - Firefox mistakenly left-aligns a centered absolutely positioned element (with margin:auto and inset:0)

Status: RESOLVED FIXED

(Core :: Layout: Positioned, defect)

Description

[Daniel Holbert [:dholbert]]

STR:

1. Load this reduced testcase: https://bug2017282.bmoattachments.org/attachment.cgi?id=9545905

ACTUAL RESULTS:
The cyan square is placed near the top-left corner.

EXPECTED RESULTS:
The cyan square should be centered vertically and horizontally.

If you resize your window or inspect the element in DevTools, then it snaps to the proper position -- so this seems to be a bug where we get the position wrong on the first reflow, but we end up with correct information on later incremental reflows.

This is the platform bug that underlies site-report bug 2016981 and bug 2017282. This is a regression from bug 1985982, as noted in those bugs. (Also, thanks to Oriol for the reduced testcase!)

Comment 1

[BugBot [:suhaib / :marco]]

Set release status flags based on info from the regressing bug 1985982

Comment 2

[Ting-Yu Lin [:TYLin] (PST, UTC-7)]

Attachment: Bug 2017440 - Trigger reflow for abspos elements with auto margins in either axis when style changes. r?#layout

RecomputePosition() is a fast path to determine if a frame can be repositioned
with a style change. After bug 1985982 moved auto margin resolution to always
happen after reflow in
AbsoluteContainingBlock::ResolveAutoMarginsAfterLayout(), this fast path makes
auto margins in the inline-axis unresolved, causing mispositioned abspos
elements.

This patch broadens the existing guard to bail out for any auto margin (inline
or block axis) on out-of-flow frames, not just block-axis auto margins on frames
with intrinsic block-size keywords.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/82ed7312a946
https://hg.mozilla.org/integration/autoland/rev/521565e513be
Trigger reflow for abspos elements with auto margins in either axis when style changes. r=layout-reviewers,dholbert

Comment 4

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/57914 for changes under testing/web-platform/tests

Comment 6

[amarc]

https://hg.mozilla.org/mozilla-central/rev/521565e513be

Comment 7

[BugBot [:suhaib / :marco]]

The patch landed in nightly and beta is affected.
:TYLin, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
  • See https://wiki.mozilla.org/Release_Management/Requesting_an_Uplift for documentation on how to request an uplift.
• If no, please set status-firefox148 to wontfix.

For more information, please visit BugBot documentation.

Comment 8

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 10

[Ting-Yu Lin [:TYLin] (PST, UTC-7)]

Requested uplift to beta in lando.

Comment 11

[Phabricator Automation]

firefox-beta Uplift Approval Request

• User impact if declined: If declined, absolutely positioned elements with auto margin in the inline axis will have incorrect positions after performing dynamically operation such as change the inset property. This affects expensify.com and other user reports usecases (Bug 2016981, Bug 2017282).
• Code covered by automated testing: yes
• Fix verified in Nightly: yes
• Needs manual QE test: no
• Steps to reproduce for manual QE testing:
• Risk associated with taking this patch: low
• Explanation of risk level: This patch triggers reflow in a targeted way for absolutely positioned elements in the "user impact" scenario. It does not change the logic for computing the position of the absolutely positioned elements nor in-flow elements.
• String changes made/needed: N/A.
• Is Android affected?: yes

Comment 12

[Ting-Yu Lin [:TYLin] (PST, UTC-7)]

Attachment: Bug 2017440 - Trigger reflow for abspos elements with auto margins in either axis when style changes.

RecomputePosition() is a fast path to determine if a frame can be repositioned
with a style change. After bug 1985982 moved auto margin resolution to always
happen after reflow in
AbsoluteContainingBlock::ResolveAutoMarginsAfterLayout(), this fast path makes
auto margins in the inline-axis unresolved, causing mispositioned abspos
elements.

This patch broadens the existing guard to bail out for any auto margin (inline
or block axis) on out-of-flow frames, not just block-axis auto margins on frames
with intrinsic block-size keywords.

Original Revision: https://phabricator.services.mozilla.com/D284001

Comment 16

[Donal Meehan [:dmeehan]]

Comment on attachment 9546976 [details]
Bug 2017440 - Trigger reflow for abspos elements with auto margins in either axis when style changes.

Fx148 is now in release. Changing to a release uplift request for a later dot release.

Comment 17

[Pulsebot]

https://github.com/mozilla-firefox/firefox/commit/081fa60806c3
https://hg.mozilla.org/releases/mozilla-release/rev/609ca4da7247