nightly.mozilla.org (https://www.mozilla.org/en-US/firefox/channel/desktop/#nightly ) renders with a header-bar that immediately disappears and reveals an awkward partial paragraph

dholbert commented 9 months ago

Description

If you go to the standard https://nightly.mozilla.org download-page in Firefox or Edge or Chrome, there's a header-bar that usually immediately disappears to reveal part of a paragraph about Firefox Developer Edition (not Nightly), which looks broken and is confusing.

Steps to reproduce

Visit https://nightly.mozilla.org (or https://www.mozilla.org/en-US/firefox/channel/desktop/#nightly ) in Chrome or Firefox or Edge.

Expected result

I should see Firefox Nightly icon and download-button prominently at the top of the screen. There shouldn't be any dev-edition text that comes before it.

Actual result

There's a bit of a paragraph about Firefox Developer Edition at the top of the viewport (initially covered up by the Mozilla header-bar which immediately disappears). This is confusing since it's describing a different version (not Nightly), whose information/etc. is otherwise entirely offscreen.

Environment

What browser and operating system are you using? I tested and reproduced the issue in several browsers: Chrome 123.0.6262.5 (Official Build) dev (64-bit) on Linux Edge 121 on Win11 Firefox 124.0a1 (2024-01-30) (64-bit)

Notes:

The bug isn't 100% reproducible (sometimes the header bar sticks around), but it reproduces most of the time.
After the bug reproduces, if you do a simple "lightweight" reload (Ctrl+R), the header-bar usually reappears and stays in place, and so the rendering looks fine (no weird/unexpected text about DevEdition).
But if you do a "hard" shift+reload, or load the URL in a new tab, then the bug usually comes back.

It looks like this site has logic to automagically hide the header-bar when the user scrolls down. So I think the issue is that the browser is (a) loading the site, (b) scrolling down to #nightly, and then (c) the page reacts to that downward-scrolling by hiding the header-bar.

Maybe we just need to suppress our header-bar-hiding (part (c) in this 3-step-process) for the initial load, e.g. with some sort of fixed-time suppression period for a few seconds or something?

dholbert commented 9 months ago

Here's a screencast of the bug in Chrome (showing the final rendering at the start to jump-to-the-point, and then loading nightly.mozilla.org in a new tab to demonstrate what pageload looks like)

Screencast from 01-30-2024 11:12:50 PM.webm

dholbert commented 9 months ago

screenshots of actual/expected rendering: Actual rendering: actual Expected rendering:

stephaniehobson commented 6 months ago

Hrm. I'm not able to reproduce. The header does slide up under the same conditions for me but it does not reveal the DevEdition paragraph.

Could you please comment with your browser window size?

dholbert commented 6 months ago

I can still reproduce when testing in Chrome with a 1200px-by-620px viewport.

You're correct that it's viewport-size-dependent. I found two ways I can change the viewport (starting from the above^ size) that avoid the issue:

If my viewport is shorter than 600px, then it looks like the header disappears in a different way and the Nightly area ends up closer to the top of the viewport, in a fresh load of the page (e.g. in a new tab).
If my viewport is wider than 1312px, then the layout changes a bit and there's just some blank space above the Nightly area, in a fresh load of the page (e.g. in a new tab).

mozilla / bedrock