1727974 - Rendering issue on impfdashboard.de

Status: NEW

(Core :: Layout, defect)

Description

[Tom S. (please needinfo tschuster)]

On impfdashboard.com scrolling down to the section "Impf-Fortschritt nach Altersgruppen" shows a horizontal bar chart for "Mindestens 60 Jahre", "18–59 Jahre" etc. These bars are not correctly aligned on the left side. Opening the developer tools, will however shift the rendering to be correct.

Comment 1

[Tom S. (please needinfo tschuster)]

Attachment: screenshot

Comment 2

[Darkspirit]

These are nested flexboxes and there is some padding-right: calc(1 * 14.6969384754px);

Also reproducible with Basic/ESR78 and Basic/62.
Fine with Chromium 90.

Comment 3

[Hiroyuki Ikezoe (:hiro)]

After resizing the browser window, it gets aligned properly. We may fail to detect changes that we need to invalidate?

Comment 4

[Tom S. (please needinfo tschuster)]

Seems like applying the patches in bug 1700580 locally fixes it for me.

Comment 5

[Emilio Cobos Álvarez [:emilio]]

Sweet, thanks for checking.

Comment 6

[Ting-Yu Lin [:TYLin] (PST, UTC-7)]

I tested the site on Firefox 94.0a1 (2021-09-20) (with bug 1700580 fixed), but I can still reproduce this problem.

The three rows are separate flex containers, and their first items have "flex-shrink: 1" [1], which can shrink below their specified width. Each item has different text in it, so they are likely to have different intrinsic width. There no guarantee that the first item in each flex container will have the same specified width unless it has flex-shrink: 0.

However, each item's has children with padding-right: calc( 1 * ( 14.0329287426px + 0.6640097328 * (100vw - 480px) / 800 ) ), which involves with a viewport unit. It seems the website uses some trick to make the flex item's intrinsic size static (to simulate flex-shrink:0 perhaps?), which expose Firefox's width invalidation issue in incremental layout. This doesn't look like a flexbox issue, and a more reduced testcase will be very helpful.

[1] The first items contain "Mindestens 60 Jahre 24,1 Mio. Menschen", "18–59 Jahre 45,3 Mio. Menschen", and "12–17 Jahre 4,5 Mio. Menschen", respectively.