1401978 - [pebbles] Legacy navigation links are invisible when window is exactly 760px wide

Status: RESOLVED FIXED

(www.mozilla.org :: Pages & Content, defect)

Description

[Alex Gibson [:agibson]]

STR:

1.) Visit https://www.mozilla.org/de/
2.) Resize the browser to exactly 760px wide (using responsive design mode in Dev Tools is the easiest way to do this accurately).

Expected results:

Navigation links should be visible

Actual results:

Navigation links are not visible. Only the Mozilla logo is visible.

:jpetto disvocered this issue during review in https://github.com/mozilla/bedrock/pull/5112, but we felt this warranted a bug of it's own.

The easy (but potentially flawed) fix is to adjust the breakpoints by 1px in `nav-main-resp.js` here: https://github.com/mozilla/bedrock/blob/master/media/js/base/nav-main-resp.js#L224-L230

This fixes the issue on Pebbles pages, but because this JS lib is also used in Sandstone it complicates things. Adjusting the breakpoints by 1px creates a mismatch on Sandstone pages, because of the way CSS breakpoints are defined:

/* Tablet Layout: 760px */
@media only screen and (min-width: @breaktablet) and (max-width: @breakdesktop) {

}

/* Mobile Layout: 320px */
@media only screen and (max-width: @breaktablet) {

}

As you can see, at exactly 760px wide both media queries are satisfied, so the JS mediaquery breakpoints would be out of sync with the CSS breakpoints by 1px.

We'll need to research the impact of changing any breakpoints before we decide on the best solution.

Comment 1

[Alex Gibson [:agibson]]

The legacvy navigation has been removed from bedrock, fixing this issue.