www3.animeflv.net - The card label is placed under the card instead of being on top of the card

[XRaTiX]

URL: https://www3.animeflv.net/

Browser / Version: Firefox 83.0 Operating System: Linux Tested Another Browser: Yes Chrome

Problem type: Design is broken Description: Items not fully visible Steps to Reproduce: In the home page in the section "Ultimos animes agregados",the green ribbon "Estreno" is behind the image,should be front of the image,on Chrome works as expected.

View the screenshot

Browser Configuration

• gfx.webrender.all: true
• gfx.webrender.blob-images: true
• gfx.webrender.enabled: false
• image.mem.shared: true
• buildID: 20201019162914
• channel: beta
• hasTouchScreen: false
• mixed active content blocked: false
• mixed passive content blocked: false
• tracking content blocked: false

View console log messages

From webcompat.com with ❤️

[cipriansv]

Thanks for the report.

I was indeed able to reproduce the issue. The "ESTRENO" label is laced under the card instead of being on the top of the card.

Tested with: Browser / Version: Firefox Nightly 84.0a1 (2020-10-20), Chrome 86.0.4240.80 Operating System: Pop_OS 20.04

This is the web page displayed in Firefox Nightly:

And this is the web page displayed in Chrome:

Moving the issue to needsdiagnosis.

[ksy36]

Here is a reduced test case: https://codepen.io/ksy36/pen/qBNqOeQ where an inline parent element with position: relative and z-index: 2 is affecting z-index positioning of its children (one of them is absolute positioned inline element and another is relative positioned block-level element). Looks like higher z-index of absolute positioned child element s not being honoured.

@dholbert do you know if this is another case of https://bugzilla.mozilla.org/show_bug.cgi?id=1573990 ?

[dholbert]

@dholbert do you know if this is another case of https://bugzilla.mozilla.org/show_bug.cgi?id=1573990 ?

Seems likely, yeah.

Simple workaround that we could hypothetically suggest (and that demonstrates this is likely the bug you mentioned): the bug goes away if I add display:block to this rule from https://www3.animeflv.net/assets/animeflv/css/css.css?v=1.2.6:

.Anime>*,.Noti>*{position:relative;z-index:2}

[ksy36]

Thanks! I'll move this to needscontact, so maybe the site can apply the workaround

[dholbert]

Hmm, we had this linked up to bug 1573990 as noted above; but Chrome matches our behavior there now, and yet we still disagree with them on the rendering of this site. (Chrome still gives the expected results shown in screenshots above, with diagonal-green-banner in front of the images, whereas the banner is behind the images in Firefox.)

So there's something else going on here...

[dholbert]

ksenia's codepen reproduces the behavior-difference, too, so we don't need to re-reduce a testcase (hooray!)

[dholbert]

I've filed https://bugzilla.mozilla.org/show_bug.cgi?id=1899829 for this issue now.