Page MenuHomePhabricator

Scroll down on a resized browser window with two topics - the browser window shakes
Closed, ResolvedPublic

Description

The issue is present on beta when a Flow board has only two topics and a browser window is resized(FF38 and Chrome 43).

  1. Create a Flow board with two topics.
  2. Make sure that your browser windows is resized - any size but full view and the web dev panel is not displayed
  3. Scroll down with arrow buttons or touch pad - the screen will shake when the vertical scroll bar reaches the end of the screen.

Event Timeline

Etonkovidova raised the priority of this task from to Needs Triage.
Etonkovidova updated the task description. (Show Details)
Etonkovidova added subscribers: Aklapper, Etonkovidova.

This happens because the NavigationWidget (the "Browse topics" button/dropdown and the "Recent topics" dropdown) changes from position: relative; to position: fixed; when you scroll down, which means it's taken out of the content flow, which means the height of the page is reduced (by the height of the NavigationWidget), which means the page scrolls again. The shaking happens as follows:

  • Initially, the NavigationWidget is visible in its normal position, near the top of the screen
  • User scrolls down
  • The NavigationWidget scrolls out of view
  • The onWindowScroll handler notices that scrollTop > top coord of the NavigationWidget's parent, and affixes the NavigationWidget to the top of the screen
  • Because the NavigationWidget is now affixed, its height (31px) no longer contributes to the height of the page, reducing the height of the page. To maintain the same visual scroll position, scrollTop is also decreased by 31px
  • Because scrollTop has changed, a scroll event is emitted, and onWindowScroll is called (again)
  • onWindowScroll notices that scrollTop > top of NavigationWidget's parent is no longer true (because scrollTop has decreased) and un-affixes the NavigationWidget
  • The NavigationWidget's height once again contributes to the height of the page, increasing the height of the page back to the previous value

We should probably fix this by making the scrollTop > parentTop calculation take affixed-ness into account.

Change 225047 had a related patch set uploaded (by Mooeypoo):
Initialize navigation div with a height value

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

Change 225047 merged by jenkins-bot:
Initialize navigation div with a height value

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

Catrope assigned this task to Mooeypoo.Jul 22 2015, 11:48 PM
Catrope triaged this task as High priority.
Catrope set Security to None.
Mooeypoo closed this task as Resolved.Apr 1 2016, 12:36 PM