Page MenuHomePhabricator

"packed" galleries are jumpy because browser menu bars sliding into view secretly resize the browser viewport
Closed, ResolvedPublic

Description

"packed" galleries are jumpy because browser menu bars sliding into view secretly resize the browser viewport, and every time the browser viewport is resized we recalculate their dimensions.

In this example, I am testing on https://en.wikipedia.org/wiki/Middle_East#Gallery, I press Ctrl+F to open the search bar, and then close it. The gallery jumps back and forth both times. (This is on Opera, but Firefox and Edge do the same thing.)

https://drive.google.com/file/d/14uC6DLy32mK_VJxhc9ZWSgWO0K29GZMO/view?usp=sharing

(the file is too large for Phabricator…)

@Legoktm has had similar issues with mobile browsers when their address bar slides into view:

https://cloud.legoktm.com/index.php/s/tcfnedbgXaE937P

Event Timeline

matmarex created this task.May 8 2018, 6:34 PM
Restricted Application added a project: Multimedia. · View Herald TranscriptMay 8 2018, 6:34 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
matmarex claimed this task.May 8 2018, 6:37 PM

I think we can do two things to improve this:

  • Do not recalculate if only window height has changed, but not width
  • Set a min-height on the gallery element so that content following it does not reflow twice

Change 431822 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/core@master] mw.page.gallery: Prevent jumpiness due to viewport height changes

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

matmarex updated the task description. (Show Details)May 8 2018, 7:36 PM
matmarex triaged this task as Normal priority.May 10 2018, 12:48 AM

Change 431822 merged by jenkins-bot:
[mediawiki/core@master] mw.page.gallery: Prevent jumpiness due to viewport height changes

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

matmarex closed this task as Resolved.May 24 2018, 7:34 PM
matmarex removed a project: Patch-For-Review.
Vvjjkkii renamed this task from "packed" galleries are jumpy because browser menu bars sliding into view secretly resize the browser viewport to 2cdaaaaaaa.Jul 1 2018, 1:11 AM
Vvjjkkii reopened this task as Open.
Vvjjkkii removed matmarex as the assignee of this task.
Vvjjkkii raised the priority of this task from Normal to High.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed subscribers: gerritbot, Aklapper.
Community_Tech_bot renamed this task from 2cdaaaaaaa to "packed" galleries are jumpy because browser menu bars sliding into view secretly resize the browser viewport.Jul 1 2018, 6:14 AM
Community_Tech_bot closed this task as Resolved.
Community_Tech_bot assigned this task to matmarex.
Community_Tech_bot updated the task description. (Show Details)
CommunityTechBot lowered the priority of this task from High to Normal.Jul 3 2018, 3:27 AM