Make WordPress Core

#54210 closed defect (bug) (fixed)

Admin menu collapse button inactive at 960px

Reported by: webaxones's profile Webaxones Owned by: johnjamesjacoby's profile johnjamesjacoby
Milestone: 5.9 Priority: normal
Severity: normal Version: 5.8.1
Component: Administration Keywords: has-patch has-testing-info commit has-screenshots
Focuses: ui, accessibility, javascript, administration Cc:

Description

If your browser is sized at 942px (942px on Chrome, 943px on Firefox) with the admin menu already collapsed, the collapse button appears to do nothing.
If user click on it, nothing happens.
And this happens because the media query targets a max-width of 960px instead of targeting 959.98px for example.
This may seem like a minor bug, but this screen dimension is exactly the one you get on a 1920px resolution screen when you ask your OS (windows for example) to display 2 browsers side by side: 2 WP admin screens with 2 buttons that don't work.

Attachments (4)

54210.patch (570 bytes) - added by sabernhardt 20 months ago.
ticket54210-webaxones.mp4 (2.4 MB) - added by audrasjb 20 months ago.
Can't reproduce the original issue on my side
BeforeFix.mp4 (2.0 MB) - added by Ankit K Gupta 20 months ago.
Status - Before fix
AfterFix.mp4 (1.3 MB) - added by Ankit K Gupta 20 months ago.
Status - After fix

Change History (22)

@sabernhardt
20 months ago

#1 follow-up: @sabernhardt
20 months ago

  • Focuses javascript added; css removed
  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 5.9

Hi and thanks for the report!

The problem seems to be in the common.js file, not CSS.

viewportWidth < 960 did not include 960 pixels, so I switched the operator to less than or equal to 960.

#2 in reply to: ↑ 1 @Webaxones
20 months ago

Indeed. Sorry I didn't search any further because I thought the problem was unlikely to be qualified as a bug. I should have :)

Replying to sabernhardt:

Hi and thanks for the report!

The problem seems to be in the common.js file, not CSS.

viewportWidth < 960 did not include 960 pixels, so I switched the operator to less than or equal to 960.

#3 @sabernhardt
20 months ago

  • Keywords needs-testing added

@Webaxones That comment was (more) for other people; you did not need to know exactly where the problem was. The fact that you found a bug and reported it is plenty :)

For anyone testing the patch:

  1. Access a WordPress admin screen (page) with a desktop-sized monitor.
  2. Adjust the browser window size so the side admin menu's auto-fold feature collapses the menu. Make sure the width is only one pixel narrower than where the side menu is expanded.
  3. Click on the arrow link at the bottom to Expand Main Menu. This should not work correctly before applying the patch.
  4. Apply the patch. Verify that the JavaScript compiles correctly and is not cached.
  5. Refresh the browser at the same size.
  6. Click on the arrow link at the bottom to Expand Main Menu. Verify that the menu expands now.
Last edited 20 months ago by sabernhardt (previous) (diff)

@audrasjb
20 months ago

Can't reproduce the original issue on my side

#4 @audrasjb
20 months ago

Hmm ok thanks @sabernhardt for the sharing the testing process, now I understand why I wasn't able to reproduce the issue. I'll test again later today.

#5 @Webaxones
20 months ago

https://i.imgur.com/weM6mC3.gif
Here is a more telling visual demo:
On Windows, I open 2 windows, then snap the first one on the left by pressing the Windows Logo Key + Left Arrow, then snap the second one on the right by pressing the Windows Logo Key + Right Arrow.
-> Neither of the 2 collapse buttons works.

This ticket was mentioned in Slack in #core-test by boniu91. View the logs.


20 months ago

#7 @Ankit K Gupta
20 months ago

Test Report

Test Environment

  • WordPress: 5.9-alpha-51272-src
  • Browser: Google Chrome Version 94.0.4606.61 (Official Build) (x86_64)
  • OS: macOS Big Sur V 11.5.1
  • Theme: Twenty Twenty-One
  • Web Server: nginx
  • PHP & MySQL: 8.0.0 & 8.0.16
  • Console Log: All fine
  • WP Debug Log: All fine.

Steps to Test

  1. Go to WP Dashboard.
  2. Right click and click on the 'Inspect'option.
  3. Click on kebab menu(three dots) and select 'Dock to right' option.
  4. Now click on browser resizer option.
  5. Select Dimensions 'Responsive'
  6. Change the width to 960.
  7. Click on 'Expand' menu icon.
  8. This action will do nothing on click.
  9. Apply patch file and build all assets.
  10. Click on 'Expand'icon.
  11. Menu will expand/collapse as expected.

Test Results

Menu Expand/Collaps actions are working expected on screen size 960px.

Test Status

Pass(on Mac)

PS: Would be great if someone also check once on Windows machine.

ScreenCast (videos)

Attached.

@Ankit K Gupta
20 months ago

Status - Before fix

@Ankit K Gupta
20 months ago

Status - After fix

#8 @Ankit K Gupta
20 months ago

Hello @Webaxones
Warm welcome on Trac and Thanks for creating the ticket :)

This ticket was mentioned in Slack in #core-test by ankit-k-gupta. View the logs.


20 months ago

#10 @abesell132
20 months ago

This issue seems to be more widespread than just the admin menu. A similar bug can be replicated on the front end. Drop this code into any page or post to replicate:

<div id="change">This starts blue and turns red below 1400px</div>
<style>
    #change {color: blue;}

    @media only screen and (max-width:1400px) { #change { color: red;} }
</style>

From a screen width of 1384px to 1920px the color is blue. The 1400px max-width media query doesn't kick in until 1383px. (The text turns red 17 pixels late)

Test Environment
WP Version: 5.8.1
PHP Version: 7.3
Browser: All of em'
Theme: Twenty Twenty One
Web Server: Apache
Logs: Nothing

#11 @sabernhardt
20 months ago

@abesell132 When the media query style change starts acting at about 17 pixels less than the breakpoint value, that likely is because browsers include the scrollbar within that number. If the page does not have enough content to involve scrolling, however, then the window width should match the media query max-width.

#12 @sabernhardt
20 months ago

  • Summary changed from Admin collapse button inactive due to a media query incorrectly targeting a breakpoint to Admin menu collapse button inactive at 960px

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


20 months ago

#14 @Boniu91
19 months ago

  • Keywords has-testing-info added

This ticket was mentioned in Slack in #core-test by mai21. View the logs.


19 months ago

#16 @mai21
19 months ago

Test Report

Reproducible and Fixed (click collapse button now is working on width 960, 961,959)

Env

  • WordPress 5.9-alpha-51947
  • Chrome 95.0.4638.54
  • Ubuntu 18.04.6
  • Theme: Twenty Twenty One


#17 @audrasjb
19 months ago

  • Keywords commit has-screenshots added; needs-testing removed

Thanks for testing @mai21

Marking this for commit.

#18 @johnjamesjacoby
19 months ago

  • Owner set to johnjamesjacoby
  • Resolution set to fixed
  • Status changed from new to closed

In 51977:

Admin/Menu: include 960 exact pixel width in collapse measurements.

This change removes a 1 pixel gap in the measurement of the viewport width when clicking the "Collapse menu" button (at the bottom of the admin menu UI) when already collapsed, causing the menu not to open as intended when exactly 960 pixels wide.

Before this change, the menu would be stuck in the collapsed position. After this change, the menu opens as expected.

Props abesell132, ankit-k-gupta, audrasjb, boniu91, mai21, sabernhardt, webaxones.

Fixes #54210.

Note: See TracTickets for help on using tickets.