"Pick"/"Update your interests" button on new-tab-page has significant visible layout-shift during pageload
Categories
(Firefox :: New Tab Page, defect)
Tracking
()
People
(Reporter: dholbert, Unassigned, NeedInfo)
References
(Blocks 1 open bug)
Details
Attachments
(5 files)
screenshot of "bad" initial rendering, taken from the screencast
STR:
- Start Firefox with a fresh profile.
- Open a new tab.
- Do any of the following to force the new-tab to re-render, and pay special attention to the "Pick your interests" (or "Update your interests") button during the new-tab rendering process. Either:
3a. Rapidly reload the new-tab.
3b. Click some story on the new-tab to navigate away, and then navigate back.
3c. Open a new window (Ctrl+N)
EXPECTED RESULTS:
No layout shift associated with this Pick Your Interests / Update Your Interests button.
ACTUAL RESULTS:
During pageload, the button briefly renders in a substantially different way, before it snaps to its final rendering. This sudden change results in substantial layout shift for the button itself, and I think for the content that follows it as well (the grid of new-tab tiles).
Comparing the "initial" vs. "final" rendering for this button (lowercase (a)-(e) for initial vs uppercase for final):
Initial rendering:
(a) the font-size is relatively large, and the font-weight is regular (not bold)
(b) the text-color is the color of regular-text on the new-tab page (i.e. black text, if you've got a light color-scheme).
(c) there's no button-background.
(d) the right edge of the text (the trailing "s") is aligned with the right edge of the suggested-stories-grid.
(e) the text doesn't seem to have any vertical padding
Final rendering:
(A) the font-size gets smaller, and the font-weight becomes bold.
(B) the text-color flips from black to white (or vice versa)
(C) a button-background appears.
(D) the text jumps leftwards (to be centered in some button-padding, so now the button's right-edge is aligned with the right edge of the suggested-stories-grid)
(E) the text gains some vertical padding -- this means the text itself moves downwards, and it also pushes down all the content that follows it, and it pushes down the title that's at the top-left of the grid ("Today's picks" or "Thought-provoking stories") since that title is aligned with it
|
Reporter | |
Comment 1•1 year ago
|
||
|
|
Reporter | |
Comment 2•1 year ago
|
||
|
|
Reporter | |
Comment 3•1 year ago
|
||
|
|
Reporter | |
Comment 4•1 year ago
|
||
Often the "bad" rendering here is showing at the same time as we're showing the collapsed sausage-tile layout that's discussed in bug 1917698, but this is distinct from that bug in several ways. Namely, the appearance-change for this "Interests" button may happen after the tile-grid has already been filled (as in my attached screenshots); and also, I can reproduce this bug in builds from before bug 1917698 regressed.
I'm guessing this bug here goes back as far as this Interests-button has existed, but I haven't confirmed that yet.
|
|
Reporter | |
Comment 5•1 year ago
|
||
|
|
Reporter | |
Comment 6•1 year ago
|
||
|
|
Reporter | |
Comment 7•1 year ago
|
||
(In reply to Daniel Holbert [:dholbert] from comment #4)
I'm guessing this bug here goes back as far as this Interests-button has existed, but I haven't confirmed that yet.
Confirmed -- I can reproduce this bug in Nightly 2024-08-03 which is the first Nightly that had this button.
|
|
Reporter | |
Comment 8•1 year ago
•
|
||
Just to distinguish between two bugs about related UI:
- this bug here is about the button having some brief misrenderings during pageload.
- Independent of that, the dialog spawned-by-this-button also has some issues when it first gets displayed (particularly on the first new-tab in a fresh-profile) -- that's tracked in bug 1920533.
|
||
Comment 9•1 year ago
|
||
The severity field is not set for this bug.
:thecount, could you have a look please?
For more information, please visit BugBot documentation.
Description
•