1523596 - Artifacts (large black rectangles, i.e. giant hamburger menu) displayed briefly on google calendar during refresh

Status: NEW

(Core :: Layout, defect, P5)

Description

[Alexandru Trif, Desktop Test Engineering [:atrif] [PTO 15-29 Aug, please ni? :mboldan]]

Affected versions

• Nightly 67.0a1 (20190128214724)
• Firefox 66.0b3 (20190128143734)
• Firefox 65.0 build2 (20190124174741)

Affected platforms

• Windows 10 x64
• Ubuntu 18.04 x64
• macOS 10.12.6

Steps to reproduce

1. Launch Firefox.
2. Go to https://calendar.google.com/ and log in using valid credentials.
3. Refresh the current tab and observe the behavior.

Expected result

• The page refreshes without visual glitches.

Actual result

• Right after (re)loading the page, dark lines appear on the page.
• Attached a screen recording with the issue: https://drive.google.com/file/d/1KaCRS43j51mpbVQbhh77i_KmCDgdw6wc/view

Regression range

• I tried to look for a regression but with no luck because the issue is still reproducible on older builds and it’s quite intermittent.

Additional notes

• The issue is reproducible when first time loading the page and after refresh.

Comment 1

[Daniel Holbert [:dholbert]]

I can reproduce in Firefox Nightly on Linux. I can't reproduce in a debug build, though, for what it's worth.

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (the SVG from the google calendar hamburger menu)

I just happened to hit this on a momentarily slow connection, and the black bars stuck around for long enough that I could inspect them in devtools.

It turns out they're just the hamburger menu, which I presume is initially not given a size and hence fills the viewport (as it does in this testcase, which I snipped verbatim out of the Google Calendar dom).

So, it's likely this is just a flash-of-unstyled-content, where there's a style that gets added partway through the loading process to add a constrained size to this SVG element's container.