Make WordPress Core

Opened 3 years ago

Closed 5 days ago

#52354 closed defect (bug) (fixed)

Twenty Twenty-One: primary menu disappears at 481px

Reported by: stephenbrook's profile stephenbrook Owned by: karmatosed's profile karmatosed
Milestone: 6.6 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch commit
Focuses: accessibility, css Cc:


Hi When I set screen width to 480px I see the mobile menu. At 482px, I see the desktop menu but at 481px there are no menus displayed.
I am using a chrome browser on windows 10. No active plugins and a fresh install of the theme.

Attachments (8)

f1d0f0ffd9f058d4d7751f9f308cb555.gif (305.3 KB) - added by audrasjb 3 years ago.
Works fine on Chrome/OSX
480.JPG (50.5 KB) - added by stephenbrook 3 years ago.
481.JPG (55.6 KB) - added by stephenbrook 3 years ago.
482.JPG (41.6 KB) - added by stephenbrook 3 years ago.
481.png (53.0 KB) - added by siliconforks 5 weeks ago.
width = 481px (200% zoom)
481.5.png (51.5 KB) - added by siliconforks 5 weeks ago.
width = 481.5px (200% zoom)
482.png (56.1 KB) - added by siliconforks 5 weeks ago.
width = 482px (200% zoom)
52354.diff (1.4 KB) - added by sabernhardt 4 weeks ago.
subtracting 0.02 instead of 1

Download all attachments as: .zip

Change History (33)

#1 @audrasjb
3 years ago

Hello @stephenbrook, welcome to WordPress Core Trac and thank you for opening this ticket!

I tried to reproduce the issue on Chrome/MacOS but it looks like it works fine on my side. I'll try to reproduce on Windows as soon as possible.

3 years ago

Works fine on Chrome/OSX

#2 @mukesh27
3 years ago

I can’t replicate the same issue in my fresh installation. Can you please share your browser version so we can check the issue on that specific browser.

#3 @stephenbrook
3 years ago

Hi, the problem occurs in both of these browsers

Google Chrome - Version 88.0.4324.104 (Official Build) (64-bit)
Microsoft Edge - Version 88.0.705.50 (Official build) (64-bit)

O/S - Microsoft Windows 10 Pro - Version 10.0.19041 Build 19041

#4 @sabernhardt
3 years ago

  • Keywords needs-screenshots added

@stephenbrook Could you add screenshots?

I didn't see a problem at 481 pixels wide, either with the Responsive viewport mode or with the inspector panel open on the right side.

I tried in Chrome and Edge, with the same browser versions, though my Windows is different:
Windows 10 Home 20H2 (19042.746) with Windows Feature Experience Pack

3 years ago

3 years ago

3 years ago

#5 @stephenbrook
3 years ago

Hi I have attached images 480.jpg, 481.jpg and 482.jpg as requested

#6 @stephenbrook
3 years ago

  • Keywords has-screenshots added; needs-screenshots removed

#7 @stephenbrook
3 years ago

ok, here is a little twist. I tested this on another pc that is running Windows 10 Home Version 10.0.19042.746 and the problem does not exist. It is still a problem on my Windows 10 Pro pc.

#8 @poena
3 years ago

I am also unable to reproduce, now on Windows 10 PRO 10.0.19042 Build 19042
Chrome version Version 88.0.4324.150.

#9 @kristenfisher427
12 months ago

I know this ticket is from a few years ago, but I've recently run into the same issue of having the menu disappear at a viewport width of 481 while using the Twenty-Twenty-One theme. I'm using a Windows 10 Pro and Chrome Version 113.0.5672.63 (Official Build) (64-bit). The screenshots that @stephenbrook provided in this ticket exactly mirror what I'm experiencing. I was advised on the WordPress forums to add my experience here. I'll include a link to that forum discussion for your reference: Does anyone know of a way to fix this? Thank you very much for any help you might be able to offer!

#10 @karmatosed
6 weeks ago

  • Keywords close reporter-feedback added

I realize we now have two people able to reproduce this but I am unable to. There are a few options here:

  1. For now, I am going to apply the 'close' keyword to reflect the majority of people are unable to reproduce.
  2. Whilst the close keyword is applied if steps can be given and it's still an issue please provide them. @kristenfisher427 specifically you might be able to confirm here if you are still experiencing this?

#11 @kristenfisher427
6 weeks ago

  • Keywords has-screenshots removed

Hi @karmatosed,

Thank you for your message and for looking into this! I installed the Twenty Twenty One theme and tested a viewport width of 481. Unfortunately, I still see the menu disappearing at that width. At this point in time, I've moved on to using other themes, so personally, it's not an issue for me. But I can confirm the bug is still occurring for some reason.

#12 @karmatosed
6 weeks ago

  • Keywords needs-testing added; close removed

Thank you @kristenfisher427 let's remove the close keyword then if you are still experiencing this and see if we can get this tested.

#13 @karmatosed
5 weeks ago

  • Keywords reporter-feedback removed

#14 @siliconforks
5 weeks ago

The reason this bug is occurring is that the .primary-navigation > .primary-menu-container (desktop menu) is visible when (min-width: 482px), while the .menu-button-container (mobile menu) is visible when (max-width: 481px). That means that, if 481px < width < 482px (e.g., suppose the width is 481.5px), then neither menu will be visible.

I'm not sure how the original reporter was able to reproduce this at 481px; I suspect when the browser was displaying "481" the width was actually 481.5 (or possibly some other fractional value between 481 and 482) and rounded down or truncated for display purposes.

5 weeks ago

width = 481px (200% zoom)

5 weeks ago

width = 481.5px (200% zoom)

5 weeks ago

width = 482px (200% zoom)

#15 @siliconforks
5 weeks ago

I've added some attachments to illustrate the issue. Note that the only way I could reproduce it on my current machine was to set the zoom to 200%, but this may or may not be necessary depending on your system's pixel density, scaling factor, etc.

#16 @sabernhardt
5 weeks ago

  • Focuses accessibility css added
  • Keywords needs-patch added; needs-testing removed
  • Milestone changed from Awaiting Review to 6.6

Thanks! I get that too, now, when zooming in (as low as 110%).

Bootstrap increases the precision of its max-width media queries with pixel values such as 767.98px.

To get similar values, each of the theme's Sass breakpoint calculations could subtract 0.02 instead of 1:
(max-width: #{$breakpoint_sm - 0.02})

#17 follow-up: @jwgoedert
4 weeks ago

@siliconforks @sabernhardt
Hi all, were either of you able to reproduce this using Mac OS? Attempting with Chrome(v124) on Mac OS 13.5 and having trouble reproducing.

#18 in reply to: ↑ 17 @siliconforks
4 weeks ago

Replying to jwgoedert:

Hi all, were either of you able to reproduce this using Mac OS? Attempting with Chrome(v124) on Mac OS 13.5 and having trouble reproducing.

I didn't test it on MacOS - the screenshots I posted were from Windows 10 with Chrome 123.

#19 @sabernhardt
4 weeks ago

My testing was also with Windows 10, but with Firefox (possibly v124 last week, 125.0.2 today). It happens when I adjust the browser window, not in Responsive Design Mode (which uses integers).

4 weeks ago

subtracting 0.02 instead of 1

#20 @sabernhardt
4 weeks ago

  • Keywords has-patch needs-testing added; needs-patch removed

The patch is Sass-only, so it needs to be compiled.

#21 @poena
2 weeks ago

I am not able to reproduce issue, but I also don't see any regressions with the patch applied. I tested in firefox, chrome, safari on macOS.

#22 @joedolson
7 days ago

  • Keywords commit added; needs-testing removed

I was able to both reproduce the issue and apply the patch and observe the issue is fixed. I'm also not seeing any regression caused by this patch.

I think this is good to go; marking for commit.

I'm not super familiar with what our process is for making changes to the compiled CSS in core themes; would love for somebody else to commit this. @karmatosed?

#23 @karmatosed
6 days ago

  • Owner set to karmatosed
  • Status changed from new to assigned

Thanks @joedolson I will take a look - there was fun earlier in the week around this so I can at least know how to fix when it goes wrong.

#24 @karmatosed
6 days ago

I took a look at this and will do some more, currently if you compile the Sass using auto-script it does actually result in a range of additional things coming in, not just this patch. This isn't optimal, so I am going to explore how both to document better our scripting (then other committers can easier do this) and also see if I am even running the right script. I'll keep hold of this until that is confirmed.

If someone does commit this with that knowledge please share so we can document though, as it would be great to expose what script to run and also how to deal with the handful of themes that have compiling scripts, for all committers, within the documentation.

#25 @karmatosed
5 days ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 58142:

Twenty Twenty-One: Fixes primary menu disappearing.

The primary menu was disappearing at 481px. This adjusts to resolve this. It was shown when adjust the browser window not in responsive design mode.

Props stephenbrook, audrasjb, mukesh27, sabernhardt, poena, kristenfisher427, siliconforks, jwgoedert, joedolson.
Fixes #52354.

Note: See TracTickets for help on using tickets.