1923508 - Translated elements are displayed offset, fixing themselves when devtools update styling

Status: NEW

(Core :: Layout: Positioned, defect, P3)

Description

[violine1101]

Attachment: firefox-sprite-overlay-issue.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:131.0) Gecko/20100101 Firefox/131.0

Steps to reproduce:

1. Ensure devtools are closed
2. Open https://minecraft.wiki/w/Trial_Chambers?oldid=2708524#Mobs
3. Check the cobweb icons above the block icons
4. Open the devtools

Actual results:

• The cobweb icons are offset to the top right
• When opening devtools, occasionally the icons are placed correctly immediately
• If not, changing any styles in the inspector fixes the issue

Expected results:

The cobweb icons should be on top of the icons. Images attached.

Comment 1

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

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

Comment 2

[violine1101]

A slightly more minimal setup can be found here: https://minecraft.wiki/w/User:Violine1101/Firefox_sprite_issue

The following code already appears to trigger the bug, so it doesn't seem to be related to tables or images like initially suspected:

Test
<div style="display:inline; position:relative;"><div style="width:10em; position:absolute; transform:translateY(-100%);">
Test
</div></div>

Comment 3

[Julian Descottes [:jdescottes]]

Hi Emilio,

It seems that opening DevTools fixes this webcompat issue, but I guess the main thing to investigate is why Firefox fails to display the icons on the correct spot initially?

Is this a known issue?

Comment 4

[Julian Descottes [:jdescottes]]

(In reply to violine1101 from comment #2)

A slightly more minimal setup can be found here: https://minecraft.wiki/w/User:Violine1101/Firefox_sprite_issue

The following code already appears to trigger the bug, so it doesn't seem to be related to tables or images like initially suspected:

Test
<div style="display:inline; position:relative;"><div style="width:10em; position:absolute; transform:translateY(-100%);">
Test
</div></div>

Thanks for the reduced test case, however it seems that it only reproduces on Linux and Windows, whereas the initial issue on minecraft.wiki reproduces on all OSes. So let's keep the investigation on the first issue reported and we should maybe file another bug for the other one.

Comment 5

[Emilio Cobos Álvarez [:emilio]]

Yeah, so... This is a long-standing issue with inline absolute containers, see bug 255139 and related. It's unfortunately somewhat hard to fix on our end, but luckily easy to workaround. In this case, I don't think the <div> needs to be display: inline at all?

But yeah, this is on the radar of our webcompat effort this year.