1899829 - card label is placed at different position and stacking order in Firefox vs. other browsers at www3.animeflv.net

Status: ASSIGNED

(Core :: Layout: Positioned, defect)

Description

[Daniel Holbert [:dholbert]]

STR:

1. Load https://www3.animeflv.net/
2. Scroll down to the larger thumbnails with title "Últimos animes agregados"

EXPECTED RESULTS:
The green diagonal card labels should be in front of the thumbnail images, with the top edge being just a bit higher than the image's top edge.

ACTUAL RESULTS:
The green diagonal card labels are behind the thumbnail images, and their top edge are higher than they should be (by ~1 line-height or so).

This was originally filed as https://webcompat.com/issues/60176 which we associated with bug 1573990, but there's more going on, since Chrome aligned with our behavior for bug 1573990 and yet we still disagree with Chrome on this particular scenario here.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (for positioning difference) [fixed by Bug 1931466]

Here's a reduced testcase, as a slightly-modified version of ksenia's codepen reduction on the github issue.

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: testcase 2 (for stacking-order difference)

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase 3 (testing where the abspos containing block bounds are for an inline box)

There's definitely some weird interop differences in this area. Here's a testcase where everyone seems to agree, to get things started...

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: testcase 4 (like 3, but now added a block as a child of the inline)

In this one, Safari and Firefox agree (and match the behavior on testcase 3), but Chrome changes behavior -- they change the abspos CB width to fit the black-bordered-box (the CB of the inline-that-forms-an-abspos-cb), and they increase the height of the abspos containing block to fit the new block child.

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: testcase 5 (like 3, but now with multiple lines of text in the inline-that-forms-an-abspos-CB)

This one (with multiple lines of text) is a case where we're the odd one out; we seem to only use the first line of text to define the abspos CB, whereas Chrome and Safari seem to use the union of all of the lines.

Comment 6

[Daniel Holbert [:dholbert]]

Attachment: testcase 6 (testing stacking order via hover state)

Here's a testcase from bug 1926971 which I think is a version of this same bug (likely similar to testcase 2 here RE stacking-order-differences).

As noted in bug 1926971 comment 5, if you try hovering the rects in this testcase:

• Firefox: neither rect changes color.
• WebKit (and Chrome 100-and-older): only the lower rect changes color when hovered (i.e. WebKit needs z-index to be set on the display:inline wrapper in order for that rect to be sufficiently-in-the-foreground to be hoverable)
• Chrome (101-and-newer) both rects change color (individually) when they are hovered.

Comment 7

[Daniel Holbert [:dholbert]]

Comment on attachment 9404833 [details]
testcase 1 (for positioning difference) [fixed by Bug 1931466]

We agree with Chrome on testcase 1 now (and we agree on the vertical placement of the green labels -- the second half of the actual/expected results).

mozregression --find-fix shows that we fixed that part in Bug 1931466.

So: we can use this bug to just focus on the stacking-order issues from here on out.

Comment 8

[Daniel Holbert [:dholbert]]

This CSS intervention seems to work for www3.animeflv.net:

.Anime > a {
  display: block;
}

(The underlying issue here has to do with stacking order inside of a display:inline element that's serving as an absolutely-positioned containing block. The a element here happens to be display:inline element by default, but they don't actually make use of that display value; it's just a wrapper element.)

Comment 9

[Thomas Wisniewski [:twisniewski]]

Attachment: Bug 1899829 - add a CSS intervention for animeflv.net to fix stacking order of estreno banners; r?denschub

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/c4af1b0ff3fb
add a CSS intervention for animeflv.net to fix stacking order of estreno banners; r=denschub,webcompat-reviewers

Comment 11

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/c4af1b0ff3fb

Comment 12

[Thomas Wisniewski [:twisniewski]]

Their site has changed over to www4. instead of www3., so we'll have to update our intervention.

Comment 13

[Thomas Wisniewski [:twisniewski]]

Attachment: Bug 1899829 - update our intervention for animeflv.net; r?ksenia

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/d8e3ec154f06
https://hg.mozilla.org/integration/autoland/rev/66bda7ced41a
update our intervention for animeflv.net; r=ksenia,webcompat-reviewers

Comment 15

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/66bda7ced41a