1799974 - New Tab Page has layout shift from article source appearing a bit later than other contnet

Status: VERIFIED FIXED

(Firefox :: New Tab Page, defect)

Description

[Daniel Holbert [:dholbert]]

Attachment: screencast of the bug when repeatedly refreshing the new tab page, in a fresh Firefox profile

STR:

1. Reload the new-tab page, and watch the layout afterwards.
2. Repeat.

(Or equivalently: Open a new tab or new window, watch the layout, and then open a new tab/window again.)

ACTUAL RESULTS:
As the new tab page renders, the layout shifts a few times, which is a bit distracting & feels a bit broken.
The most noticeable (and avoidable) shift that I see is when the single-line domain name & reading-time-estimate appears, and the blurb shifts down (and the tile grows taller) to accommodate it.

EXPECTED RESULTS:
We should aim to avoid layout shift here. Specifically for the domain name & reading-time-estimate, we could just allocate some space there for that empty line, and populate it with text when the text is ready, without impacting the layout.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: first non-blank paint

Here's the first non-blank paint from the video (before any of the pocket recommended tiles have rendered at all).

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: second non-blank paint (article text has now loaded)

Here's the second non-blank paint. Notice that the domain-name & reading-time-estimates are not present yet on the articles, and no space has been left aside for them.

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: final paint (domain names and reading time estimate is now present)

Here's the final paint, with the tiles fully loaded. If you compare this side-by-side to the previous one, you can see that the page-content jumps as the line is inserted for each tile's domain name and reading-time-estimate.

Comment 4

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:daleharvey, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 5

[Dale Harvey (:daleharvey)]

This one seem like possibly a P2 so pinging Scott just in case this needs fixed as a priority?

Comment 6

[Scott [:thecount] Downe]

Yup, this is a bug, I'll see if it's easy and fix it today.

It also might be a regression, but I doubt it is a recent regression.

Comment 7

[Scott [:thecount] Downe]

This doesn't happen without the read time, which I suspect is because it is going through fluent for that case.

I don't think we can make fluent faster than it already is, I don't think we can wait for it, and I also don't think we can easily start the fluent process sooner.

I suspect our best bet is that line to have a placeholder height to avoid the page shifting while fluent updates the string..

Comment 8

[Scott [:thecount] Downe]

Attachment: Bug 1799974 - Pocket newtab fixing loading of page to have less shifting.

Comment 9

[Scott [:thecount] Downe]

Looks like I can just modify the display of the span inside a couple translated elements so it retains the element line height while the text is being added, so the element is the same height before and after translation.

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/732eca22ad6f
Pocket newtab fixing loading of page to have less shifting. r=gvn

Comment 11

[Cristian Tuns]

Backed out for causing node failures

• Backout link
• Push with failures
• Failure Log
• Failure line: TEST-UNEXPECTED-FAIL sasslint | content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss(184, 1): Space expected between blocks (empty-line-between-blocks)

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/2d582652272c
Pocket newtab fixing loading of page to have less shifting. r=gvn

Comment 13

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/2d582652272c

Comment 14

[Ardelean Oana, Desktop QA [:oardelean]]

Reproducible on a 2022-11-09 Nightly build on macOS 12.
Verified as fixed on Firefox 109.0b4(build ID: 20221218190303) and Nightly 110.0a1(build ID: 20221220093956) on macOS 12, Windows 10, Ubuntu 22.