Reflow issue on www.gamestar.de
Categories
(Core :: Layout: Flexbox, defect)
Tracking
()
People
(Reporter: sebo, Unassigned)
References
Details
Attachments
(1 file)
|
3.00 KB,
image/png
|
Details |
Overlapping issue.png
The "GAMESPLANET" link at https://www.gamestar.de/artikel/5-jahre-anno-1800,3411771.html sometimes isn't displayed correctly. The logo on the left sometimes overlaps the price on the right (see attached screenshot). It isn't constantly reproducible, though, and goes away when resizing the viewport. So it looks like an issue related to reflowing the flexbox layout.
Steps to reproduce the issue:
- Go to https://www.gamestar.de/artikel/5-jahre-anno-1800,3411771.html
- Accept cookies by clicking on "Zustimmen"
- Reload the page (continuously, until the link is displayed incorrectly)
I couldn't break the issue down to a simple test case yet. So it might be that this is a duplicate of another reflow bug.
Sebastian
|
Reporter | |
Comment 2•4 months ago
|
||
Note that the fix for bug 1742042 did unfortunately not fix this bug. I've tested this with the latest Nightly, i.e. 134.0a1 (2024-11-13).
Sebastian
|
|
Reporter | |
Comment 3•4 months ago
|
||
I tried to break it down to a simple test case in https://jsfiddle.net/SebastianZ/c1wxd6mL/, though I wasn't successful. It seems to be related to the intrinsically sized flex items, but the issue is only occurring sporadically.
Ting-Yu, do you have an idea what could cause this issue?
Sebastian
|
||
Comment 4•3 months ago
|
||
Sorry for the late reply. I can still reproduce this issue intermittently after hitting the reload button several times.
The "GAMESPLANET" image is in a nested flex container, and it has an aspect-ratio and a percentage height. We just fixed bug 1926015 that fixed several similar nested flexbox scenarios. We can wait until the patch landed on Nightly, and check if this bug is still reproducible or not. If bug 1926015 didn't help, then this bug might be similar to bug 1888262.
|
|
Reporter | |
Comment 5•3 months ago
|
||
Thank you for the hint and the fix! It looks like the bug is indeed fixed with today's Nightly. 🎉 In yesterday's Nightly it was definitely still an issue.
The only small issue I still see is the continuous re-layouting of the link, causing it to grow until the correct size is reached. Interestingly, this issue does not occur when the DevTools are opened. Though that's ok for me and I don't think that's worth another bug report.
Sebastian
|
|
Reporter | |
Updated•3 months ago
|
|
|
||
Comment 6•3 months ago
|
||
Thank you for the hint and the fix! It looks like the bug is indeed fixed with today's Nightly. 🎉 In yesterday's Nightly it was definitely still an issue.
Yes, this bug is fixed by 1926015. I test it on Nightly 134.0a1 (2024-11-22).
The only small issue I still see is the continuous re-layouting of the link, causing it to grow until the correct size is reached. Interestingly, this issue does not occur when the DevTools are opened. Though that's ok for me and I don't think that's worth another bug report.
Right, I see either a blink or an animation of the link growth until the image loaded. However, I also see a similar effect on Google chrome, so I feel it is a design of the site.
Description
•