2004040 - anchor-center bug when overflowing the viewport

Status: RESOLVED FIXED

(Core :: Layout: Positioned, defect)

Description

[Jake Archibald [:jakea]]

Attachment: Incorrect (Firefox)

https://random-stuff.jakearchibald.com/apps/bcd-query/?filterType=version-support&browser=firefox&version=146&title=css

1. Expand the API row
2. Click the first revealed cell (firefox desktop), observe the correct behaviour
3. Click the final revealed cell (Chrome mobile), observe the incorrect behaviour

This seems to happen because the box would overflow the viewport, but it's changing position incorrectly.

Comment 1

[Jake Archibald [:jakea]]

Attachment: Correct (Chrome)

Comment 2

[David Shin[:dshin]]

Attachment: Minimum Reproducible Case

A bit different from what's filed, but the alignment is still unexpected here.

Comment 3

[Jake Archibald [:jakea]]

@dshin it might be worth adding a margin to positioned, as that's also appears to be missing from the behaviour.

.positioned {
  margin: 0 10px;
}

Comment 4

[Keith Cirkel [:keithamus]]

Attachment: Bug 2004040 - Don't consider anchors without a principal child for anchor-center position r?#layout

Comment 5

[David Shin[:dshin]]

Attachment: Bug 2004040: Improve handling of orthogonal anchor-center alignment r=#anchor-pos

Comment 6

[David Shin[:dshin]]

Attachment: Bug 2004040: Properly nudge overflowing abspos elements into IMCB. r=#anchor-pos

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/275da674fe52
https://hg.mozilla.org/integration/autoland/rev/d023bce2235f
Improve handling of orthogonal anchor-center alignment r=layout-anchor-positioning-reviewers,firefox-style-system-reviewers,layout-reviewers,emilio
https://github.com/mozilla-firefox/firefox/commit/e338585458bf
https://hg.mozilla.org/integration/autoland/rev/79cfd87c6485
Properly nudge overflowing abspos elements into IMCB. r=layout-anchor-positioning-reviewers,layout-reviewers,emilio

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/23038681a70b
https://hg.mozilla.org/integration/autoland/rev/bb3bad054882
Revert "Bug 2004040: Properly nudge overflowing abspos elements into IMCB. r=layout-anchor-positioning-reviewers,layout-reviewers,emilio" for causing wpt failures on align-self-default-overflow-htb-ltr-htb.html

Comment 9

[Cristina Horotan [:chorotan]]

Backed out for causing wpt failures on align-self-default-overflow-htb-ltr-htb.html

Backout link

Push with failures

Failure log

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/67791fd91e94
https://hg.mozilla.org/integration/autoland/rev/602833605197
Improve handling of orthogonal anchor-center alignment r=layout-anchor-positioning-reviewers,firefox-style-system-reviewers,layout-reviewers,emilio
https://github.com/mozilla-firefox/firefox/commit/6eb2a1b52bbb
https://hg.mozilla.org/integration/autoland/rev/5501c31cab33
Properly nudge overflowing abspos elements into IMCB. r=layout-anchor-positioning-reviewers,layout-reviewers,emilio

Comment 11

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/602833605197
https://hg.mozilla.org/mozilla-central/rev/5501c31cab33

Comment 12

[BugBot [:suhaib / :marco/ :calixte]]

The patch landed in nightly and beta is affected.
:dshin, 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-firefox147 to wontfix.

For more information, please visit BugBot documentation.

Comment 13

[David Shin[:dshin]]

Attachment: Bug 2004040: Improve handling of orthogonal anchor-center alignment

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

Comment 14

[Phabricator Automation]

firefox-beta Uplift Approval Request

• User impact if declined: Broken Anchor Positioning feature: Anchored element gets placed on the far side of the anchor
• 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: Relatively small change, well-covered by Web Platform Tests.
• String changes made/needed: No
• Is Android affected?: yes

Comment 15

[David Shin[:dshin]]

Attachment: Bug 2004040: Improve handling of orthogonal anchor-center alignment

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

Comment 16

[Phabricator Automation]

firefox-beta Uplift Approval Request

• User impact if declined: Broken Anchor Positioning feature: Anchored element gets placed on the far side of the anchor
• 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: Relatively small change, well-covered by Web Platform Tests.
• String changes made/needed: N/A
• Is Android affected?: yes

Comment 17

[David Shin[:dshin]]

Attachment: Bug 2004040: Properly nudge overflowing abspos elements into IMCB.

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

Comment 18

[Pulsebot]

https://github.com/mozilla-firefox/firefox/commit/525bb7a7038b
https://hg.mozilla.org/releases/mozilla-beta/rev/84de82b048cc
https://github.com/mozilla-firefox/firefox/commit/b822d195a99f
https://hg.mozilla.org/releases/mozilla-beta/rev/dd7372e2df9a