1919733 - www.laderexperten.se - Filters are misaligned

Status: NEW

(Web Compatibility :: Site Reports, defect, P3)

Description

[Calin Tanase]

Environment:
Operating system: Windows 10
Firefox version: Firefox 130.0/132

Steps to reproduce:

1. Go to https://www.laderexperten.se/lader_vard/ladervardskit
2. Apply any filters from the left side of the page.
3. Observe the behavior.

Expected Behavior:
The filters are displayed correctly.

Actual Behavior:
Filters are misaligned.

Notes:

• Reproduces regardless of the status of ETP
• Reproduces in Firefox Nightly, and Firefox Release
• Does not reproduce in Chrome

Created from https://github.com/webcompat/web-bugs/issues/141832

Comment 1

[Calin Tanase]

Attachment: image.png

Comment 2

[Daniel Holbert [:dholbert] (vacation until Jun 23)]

These checkbox-circle-things are all absolutely-positioned pseudo-elements, inside of a display:inline; position:relative containing block. We've got some known issues with having display:inline as an abspos containing block, mostly tracked as dependencies of bug 489100 (some of which are incremental/stateful-layout things like this bug seems to be -- e.g. bug 1918504).

Comment 3

[Daniel Holbert [:dholbert] (vacation until Jun 23)]

Attachment: testcase 1 (reduced)

For the record, here's a reduced testcase. Current actual-results for this:

• The initial layout has the checkbox-circle-things snap from a shifted-upwards wrong position to the right position.
• If I have devtools open, then they simply stay in the aforementioned shifted-upwards wrong position - this is presumably some layout statefulness caused by additional layout flushes in devtools.
• If I click the checkbox-circle-things, they sometimes jump to the shifted-upwards wrong position.

Comment 4

[Daniel Holbert [:dholbert] (vacation until Jun 23)]

If I edit the testcase in devtools to tweak the span.checkbox { display:inline rule with s/inline/block/, then the issue goes away (and the layout changes slightly but not catastrophically). That's the wrapper-element that's serving as the abspos containing block for each of these checkboxes -- it has position:relative. So, that's what leads me to tie this to sharing an underlying cause with bug 1918504 (i.e. a dependency of bug 489100).