1763663 - Incorrect positioning of ::before in absolute layout and odd behaviour of inspector tools

Status: RESOLVED DUPLICATE of bug 255139

(Core :: Layout, defect)

Description

[ashcorr20]

Attachment: 2022-04-07 17.20.38.gif

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.84 Safari/537.36

Steps to reproduce:

1. Opened the page
2. Noticed that grey circle (::before element) for each key event on the left hand side is way too high.
3. Opened inspector tools in a new window
4. Struggled to debug what was causing the ::before element due to it moving to the correct position with inspector tools open.

I've attached a GIF to this ticket demo'ing the issue. This isn't happening in Chrome or Safari, so I'm leaning on this potentially being an issue with Firefox and not with the site itself!

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

Website URL: https://www.theguardian.com/world/live/2022/apr/07/russia-ukraine-war-nato-foreign-ministers-to-meet-as-zelenskiy-dismisses-fresh-sanctions-live-news?dcr

Actual results:

::before element jumps about when opening the inspector tools. At first I thought this was because the inspector tools were causing the page to change size, but even when setting inspector tools to open in a new window the issue persisted.

Expected results:

::before element should not move about depending on if the inspector tools are open.

Comment 1

[Emilio Cobos Álvarez [:emilio]]

Attachment: Somewhat reduced test-case.

Comment 2

[Emilio Cobos Álvarez [:emilio]]

Removing position: relative from the inline link (.dcr-hobfaj) fixes it. This happens because we reflow the abspos elements contained by inlines too soon. This is a long-standing incremental layout bug (bug 255139).

The workaround in this case is trivial, but we should fix bug 255139.

Comment 3

[ashcorr20]

Thanks for the workaround Emilio!

I've tagged you as a co-author on https://github.com/guardian/dotcom-rendering/pull/4646/commits/c158f79e12762cf9bd7cfa669473f06416df7d0c but I can drop your name if you'd rather not be associated with our project!

Comment 4

[Emilio Cobos Álvarez [:emilio]]

That's fine, I don't mind at all :)

Thanks for the fix!