STR: 1. Start Firefox with a fresh profile. 2. Open a new tab. 3. 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-weight is regular (not bold at all) (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-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 (so the text moves downwards and also pushes down all the content that follows it)
Bug 1919883 Comment 0 Edit History
Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.
STR:
1. Start Firefox with a fresh profile.
2. Open a new tab.
3. 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-weight is regular (not bold at all)
(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-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
STR:
1. Start Firefox with a fresh profile.
2. Open a new tab.
3. 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-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-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
STR:
1. Start Firefox with a fresh profile.
2. Open a new tab.
3. 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