2010367 - position-try: flip-block is not properly flipping margin on element.

Status: NEW

(Core :: CSS Parsing and Computation, defect)

Description

[Shawn Eisenach]

Attachment: example showing fliped element without inherting margin

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:148.0) Gecko/20100101 Firefox/148.0

Steps to reproduce:

When trying to implement the strategy to draw tails on tooltips similar to the example from Dynamic Tooltip Position with Anchor Positioning by Temani Afif I noticed that in Firefox (versions 148.0b1 (aarch64) and 147.0 (aarch64)) when the position-try: flip-block rule fires, the margin of the tooltip element is not passed to the pseudo-element, which is set to inert it. This bug is not present in Safari, Edge, or Chrome at the time of filing this bug.

I'm unsure, but https://bugzilla.mozilla.org/show_bug.cgi?id=1995256 may be related.

Steps to Reproduce:

The Codepen link from the cited article is useful to reproduce:

1. load codepen example
2. drag the anchor up to trigger the flip-block behavior
3. note that the pseudo-element is not properly inheriting the margin, noticeable by the presence of the tail at the bottom of the flipped element, rather then the top

Actual results:

The pseudo-element does not inherit the parent element's margin as expected.

Expected results:

The pseudo-element should inherit the parent element's margin as expected.

Comment 1

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

The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Jonathan Kew [:jfkthame]]

Per @dshin on Matrix:

Ah, crud, this is an interleaving problem. :/ Because when the child pseudo gets styled, layout hasn't happened yet, so it couldn't possibly get any info about the parent's post-layout state.
(I thought this was exclusive to inheriting properties explicitly using anchor functions, tbh)
Part of me wonders if we can just.. recascade and set styles for pseudos, but it's going to be a hack however you cut it.