Open Bug 1407401 Opened 7 years ago Updated 7 months ago

Hard refresh causing severe flash of unstyled content

Categories

(Core :: Layout, defect, P3)

defect

Tracking

()

Tracking Status
firefox57 --- wontfix

People

(Reporter: jhirsch, Unassigned)

References

Details

Attachments

(2 files)

Attached video fouc-on-reload.mov
Noticed in recent Nightlies (started 10/6, still affects 10/10) that Github pull request pages cause a really long FOUC when the page is hard refreshed, but not on initial page load.

Here's an example page: https://github.com/mozilla-services/screenshots/pull/3614

I also see the FOUC when I first switch to a tab after a restart, which I suspect is just another way to hard refresh a page.

The only error I see in the browser toolbox is a CSP error: "Ignoring ‘x-frame-options’ because of ‘frame-ancestors’ directive". Not sure why this would affect refreshes, but not initial loads.

I'll attach a screen capture video of loading, then hard refreshing.
On 9/26 and 9/15 nightlies, I see the FOUC on initial load, as well as on refresh. No FOUC on initial load on today's nightly.
Could you try to get a regression range using mozregression? (See http://mozilla.github.io/mozregression/documentation/ for instruction)
Flags: needinfo?(jhirsch)
Yup, mozregression results:

18:41.15 INFO: Last good revision: 8d3fcb61cc736bc8269a926ab3265fa9b0d9b8e5
18:41.15 INFO: First bad revision: c15a167e6e89787a047686d03b32f7d27947936d
18:41.15 INFO: Pushlog:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=8d3fcb61cc736bc8269a926ab3265fa9b0d9b8e5&tochange=c15a167e6e89787a047686d03b32f7d27947936d
Flags: needinfo?(jhirsch)
I think this is somewhat an intentional effect of that patch, and I recall seeing something related to that and FOUC, but I'd rather let Ehsan confirm.
Flags: needinfo?(ehsan)
It looks like any issue page or pull request page on github.com triggers this FOUC problem.

Looking at the performance in devtools, I can see why the FOUC might be happening.

It looks like the page minimum render speed is around 2.8 fps. At those times, I see things like:

- a block of order of 100s of style recalculations
- followed by order of 10s of re-layouts
- followed by order of 100s of promise callbacks
- then back to tens/hundreds of style recalculations, etc

I saved the performance data, and the JSON file is attached.
I think the mozregression window doesn't tell the whole story.

In the older nightlies, I noticed that the FOUC happens on initial page load.

In newer nightlies, FOUC doesn't happen on initial load; it only occurs when the page is hard refreshed.

I'll do another mozregression to figure out when this changed.
> In newer nightlies, FOUC doesn't happen on initial load; it only occurs when the page is hard refreshed.

Ah, nope. In latest nightly, the URL in comment 0 shows a really ugly FOUC when it's first loaded into a new tab, and on refresh also.
(In reply to Emilio Cobos Álvarez [:emilio] from comment #4)
> I think this is somewhat an intentional effect of that patch, and I recall
> seeing something related to that and FOUC, but I'd rather let Ehsan confirm.

No, it isn't, but comment 6 seems to suggest FOUC is unrelated to that patch.
Breaking here should tell you why the FOUC is happening: <https://searchfox.org/mozilla-central/rev/31606bbabc50b08895d843b9f5f3da938ccdfbbf/dom/base/nsContentSink.cpp#1260>
Flags: needinfo?(ehsan)
Priority: -- → P3
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: