Page MenuHomePhabricator

Layout shift on small viewports from page tools
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

What happens?:
Page tools menu appears below the page title for an instance, before disappearing, causing a large flash and layout shift

Screenshot 2023-03-08 at 1.25.30 PM.png (678×492 px, 50 KB)

What should have happened instead?:
Page tools is inside the dropdown, no flash

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):

Developer notes

This is happening because the page tools is shown before JS kicks in and moves it into the dropdown. Related to automatic hiding of pinnable elements on small screens in pinnableElement.js. Should be able to add CSS to hide page tools before the JS takes over, similar to the TOC treatment

QA

  • No flash from reloading the page for logged in users with the main menu pinned by default
  • No flash from reloading the page for logged in users with the page tools pinned by default
  • No flash from reloading the page for logged in users with the TOC pinned by default

QA Results - Beta

ACStatusDetails
1T331563#8700701
2T331563#8700701
3T331563#8700701

QA Results - Prod

ACStatusDetails
1T331563#8748123
2T331563#8748123
3T331563#8748123

Event Timeline

ovasileva moved this task from Incoming to Current Quarter on the Web-Team-Backlog board.
ovasileva set the point value for this task to 2.Mar 9 2023, 6:18 PM

Change 897994 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Update how pinnable elements are handled with no-js and gradeC cases

https://gerrit.wikimedia.org/r/897994

nray claimed this task.

Change 897994 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Update how pinnable elements are handled with no-js and gradeC cases

https://gerrit.wikimedia.org/r/897994

Edtadros subscribed.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Ventura
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

@bwang I was able to recreate the original bug on prod by throttling the network speed and doing a hard reload. The items with a ❓ show the layout shift, but because of the shift I don't really see the flash. I did test it where I scrolled up once it shifted, but no flash. So the flash part seems to work. Also, I don't see this specific layout shift in prod.

❓ AC1: No flash from reloading the page for logged in users with the main menu pinned by default

Screen Recording 2023-03-15 at 6.10.50 PM.mov.gif (988×704 px, 709 KB)

❓ AC2: No flash from reloading the page for logged in users with the page tools pinned by default
Screen Recording 2023-03-15 at 6.13.17 PM.mov.gif (988×694 px, 1 MB)

✅ AC3: No flash from reloading the page for logged in users with the TOC pinned by default
Screen Recording 2023-03-15 at 6.13.55 PM.mov.gif (988×694 px, 506 KB)

❓ All pinned

Screen Recording 2023-03-15 at 6.09.52 PM.mov.gif (988×704 px, 981 KB)

There is a still a shift of the site logo to the right as the hamburger menu appears. This is less of an issue than the vertical shift, but should be easy enough to address.

LoadingLoaded
image.png (253×709 px, 36 KB)
image.png (219×702 px, 32 KB)

Also the Main Menu is completely unavailable in an noJS environment now (below 1000px) which seems like a regression.

There is a still a shift of the site logo to the right as the hamburger menu appears. This is less of an issue than the vertical shift, but should be easy enough to address.

This was discussed in code review, we said we would track it in another ticket https://phabricator.wikimedia.org/T332343

Also the Main Menu is completely unavailable in an noJS environment now (below 1000px) which seems like a regression.

This was intentional (more context), though it isnt a great solution and should have been descoped from the patch because it will be worked on under T313066. I was going to remove it from the patch but I didnt get to it before it was merged. I can undo the change and restore the current state (which also looks broken) if folks prefer, what do you think @ovasileva? To note, this only happens for logged in no-js users who have the main menu or page tools in a pinned state on resolutions below 1000px.

Edtadros removed Edtadros as the assignee of this task.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Ventura
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: No flash from reloading the page for logged in users with the main menu pinned by default
✅ AC2: No flash from reloading the page for logged in users with the page tools pinned by default
✅ AC3: No flash from reloading the page for logged in users with the TOC pinned by default
✅ All pinned

Screen Recording 2023-04-01 at 3.58.29 PM.mov.gif (836×878 px, 967 KB)