Page MenuHomePhabricator

Page scrolling not disabled by OOUI modal dialog in Vector 2022
Closed, ResolvedPublic2 Estimated Story Points

Description

Steps to replicate the issue

  • Open an OOUI modal dialog, such as when selecting "insert" -> "template" from VisualEditor.

What happens?:

When an OOUI modal dialog is opened it adds a oo-ui-windowManager-modal-active class to the body, which disables scrolling of the content underneath.
In Vector 2022 this is being overridden by .vector-feature-zebra-design-disabled body which sets overflow-y back to scroll

T335883.gif (263×500 px, 400 KB)

What should have happened instead?:

The content underneath the modal should not be scrollable.

AC

  • The user is not able to scroll the content when an OOUI modal dialog is open.

QA Results - Beta

ACStatusDetails
1T335883#8848574

QA Results - Prod

ACStatusDetails
1T335883#8871384

Event Timeline

I thinks this was caused by https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/910097 "Scope styles related to zebra feature flag", which increased the specificity of a lot of core rules.

That seems like a very risky thing to do, and this is unlikely to be the only thing that broke.

CC @Jdrewniak @bwang

That seems like a very risky thing to do, and this is unlikely to be the only thing that broke.

(It also caused T335625: siteSub went missing due to zebra transition, but that was a trivial change.)

Esanders triaged this task as High priority.May 4 2023, 3:03 PM

Change 917397 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] Remove scrollbars from body & 100% height

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

@Esanders thanks for filing this issue. I certainly underestimated the risk of changing specificity when structuring the Zebra module in this way. These unconventional scoped imports were designed to let us ship both the new Zebra update alongside the existing styles to production, allowing us to debug the new design as well as run an AB test. We'll explore different ways of achieving that next time.

However, in regards to this specific issue, I think the scroll-y:scoll is no longer needed in Vector 2022 anyway, so the patch above removes that rule (as well as a related 100% height).

Change 917397 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Remove scrollbars from body & 100% height

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

Edtadros subscribed.

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC1: The user is not able to scroll the content when an OOUI modal dialog is open.
you probably can't see it...but I'm really doing my best to scroll, but to no avail.

Screen Recording 2023-05-12 at 2.24.54 PM.mov.gif (878×1 px, 588 KB)

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

Open an OOUI modal dialog, such as when selecting "insert" -> "template" from VisualEditor.
✅ AC1: The user is not able to scroll the content when an OOUI modal dialog is open.
Again, just as in beta, you probably can't see it...but I'm really doing my best to scroll.

Screen Recording.gif (1×1 px, 552 KB)