Page MenuHomePhabricator

Full screen dialogs are truncated by scrollbar gutter
Closed, ResolvedPublic

Assigned To
Authored By
Esanders
Feb 22 2024, 5:00 PM
Referenced Files
F42647499: screenshot.png
Mar 15 2024, 3:38 PM
F42045578: image.png
Feb 22 2024, 5:04 PM
F42045496: image.png
Feb 22 2024, 5:00 PM
Tokens
"Burninate" token, awarded by IKhitron.

Description

  1. Open http://localhost/oojs/ui/demos/?page=dialogs&theme=wikimediaui&direction=ltr&platform=desktop on a platform that uses real scrollbars (i.e. not MacOS with default settings).
  2. Open "Process dialog (full)"
  3. Observe the right of the dialog has been truncated:

image.png (100×111 px, 1 KB)

This appears to be caused by our recent switch to scrollbar-gutter: stable in https://gerrit.wikimedia.org/r/c/oojs/ui/+/966299

Event Timeline

Real world example of full screen dialogs is the kartographer extension:
https://en.wikipedia.org/wiki/Golden_Gate_Bridge#/map/0

image.png (259×345 px, 84 KB)

This issue only appears to affect Chrome. Firefox works fine.

Looks like this is reported as https://issues.chromium.org/issues/40835364, which may also be the same as https://issues.chromium.org/issues/40792788.

Fullscreen dialogs with a scrollbar-gutter look pretty weird even in the correct rendering, actually. Maybe we could try to turn off the gutter when displaying a fullscreen dialog, but the transition between fullscreen and non-fullscreen would probably be janky… I found a recent discussion about the spec that also complains about this situation: https://github.com/w3c/csswg-drafts/issues/9904

Given the age of those issues we shouldn't expect them to be fixed any time soon.

scrollbar-gutter is supposed to be one of the things browser makers want to work in 2024: https://web.dev/blog/interop-2024 so I would say there's a chance.

Change 1008863 had a related patch set uploaded (by Esanders; author: Esanders):

[oojs/ui@master] WindowManager: Don't use scrollbar-gutter in fullscreen mode

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

My attention was drawn to this bug after I saw this, when moving the help icon to its appropriate place:

screenshot.png (1×1 px, 594 KB)

I made a very stupid fix for now, from

	.css({
		display: 'flex',
		justifyContent: 'center',
		alignItems: 'center'
	});

to

	.css({
		display: 'flex',
		justifyContent: ($.client.profile().name === 'chrome' ? 'left' : 'center'),
		alignItems: 'center'
	});

Change 1008863 merged by jenkins-bot:

[oojs/ui@master] WindowManager: Don't use scrollbar-gutter in fullscreen mode

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

Change #1017120 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] Update OOUI to v1.2.34

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

Change #1017120 merged by jenkins-bot:

[mediawiki/core@master] Update OOUI to v0.49.1

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

matmarex assigned this task to Esanders.
matmarex removed a project: Patch-For-Review.