Consider structuring show_bug.cgi in such a way that it's the <html> element that scrolls, not a descendant
Categories
(bugzilla.mozilla.org :: User Interface, enhancement, P2)
Tracking
()
People
(Reporter: botond, Assigned: glob)
References
Details
Attachments
(1 file, 1 obsolete file)
show_bug.cgi is currently structured in such a way that the <html> element is not scrollable (at unit zoom), but rather a descendant element (<main>) is scrollable and contains all of the page's scrollable content (which takes up most of the viewport -- basically evertyhing except the top navigation bar).
This is not an ideal page structure in the presence of pinch-zooming. Pinch-zooming always makes the <html> element scrollable, even if it wasn't before. Therefore, when pinch-zoomed in, there are now two nested scrollable elements: <html> and <main>. This introduces various seams into the user experience:
-
There is now "scroll handoff" from <main> to <html>. That is to say, a gesture over <main> (which is most of the visible content) will only scroll the <html> if <main> has been scrolled to its extent in that direction. Moreover, since we don't have "immediate handoff", you need to release your finger (from a touchscreen or touchpad) or move the mouse (if scrolling via scroll-wheel) in between a gesture that scrolls <main> and a gesture that scrolls <html>.
-
<html> and <main> both have their own set of scrollbars. <main>'s scrollbars are part of <html>'s scrollable content, and therefore can be scrolled on- and offscreen by scrolling <html>.
These problems have existed for a while on mobile, but now that we're bringing the ability to pinch-zoom to desktop, they're going to become a lot more noticeable. (Even more so for the scrollbar issue, since scrollbars are always visible on desktop.)
These problems would be alleviated if the page were structured such that <html> is the element that scrolls even when not zoomed in. The content currently outside of <main> (i.e. the top navigation bar) could retain its behaviour of remaining onscreen using position: fixed.
Please consider revising the page structure in this way.
|
Reporter | |
Comment 1•5 years ago
|
||
This request is probably applicable to enter_bug.cgi and various other BMO pages as well.
This will require some research to see which template this is happening in. Adding to Monday's BMO meeting agenda.
|
|
Reporter | |
Comment 3•5 years ago
•
|
||
(In reply to Botond Ballo [:botond] from comment #0)
This introduces various seams into the user experience:
An additional issue, not mentioned above, that was just reported in bug 1659268: <main> being the scrollable element means that a two-finger gesture on a touchscreen cannot be used to scroll (since two-finger gestures always target the <hml>).
This is in a sense even worse, in that it's an issue even at unit zoom.
|
||
Comment 5•5 years ago
|
||
Merged to master.
|
|
||
Comment 6•5 years ago
|
||
Reopening as caused a regression when viewing secure bugs (bug 1664243). The secure banner would no longer be visible as it was behind the header. We reverted this change and will push a new deployment.
https://github.com/mozilla-bteam/bmo/commit/03b35fbbbf5a71f7b5b5ea9c080a703c9e3102d2
|
|
||
Comment 8•5 years ago
|
||
Merged to master.
Description
•