1404444 - "What's New" page for Firefox 56 allows itself to be horizontally scrolled offscreen (with keyboard rightarrow key)

Status: VERIFIED FIXED

(www.mozilla.org :: Pages & Content, defect)

Description

[Daniel Holbert [:dholbert]]

STR:
 1. Visit https://www.mozilla.org/en-US/firefox/56.0/whatsnew/
 2. Press rightarrow on your keyboard.

ACTUAL RESULTS:
Firefox scrolls off to the right of the page, into blank space. Page content is scrolled offscreen to the left.

EXPECTED RESULTS:
No such awkward scrollability. Rightarrow should have no effect.


(I'm testing using a fresh profile and a default-sized Firefox window.)

In Nightly 58 (and probably beta 57), this actually produces EXPECTED RESULTS. But I get ACTUAL RESULTS in Firefox 56 (which is, unfortunately, the release that this particular page *will be seen in*, by definition).  Based on my testing with mozregression, it seems Firefox's behavior changed (for the better, to avoid this issue) in bug 1369072.  However, it's unlikely that this patch will make it to Firefox 56 -- so if we can adjust the page content to avoid triggering this problem, that would be great!

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screencast of bug (recorded in Firefox 56)

Comment 2

[Daniel Holbert [:dholbert]]

The problematic element seems to be this pseudo-element:
==============
.intro:after {
 background:transparent url("/media/img/firefox/whatsnew_56/wave.285fceb6ea04.svg") top center no-repeat;
 bottom:-40px;
 content:'';
 display:block;
 height:355px;
 left:50%;
 margin-left:-2122px;
 position:absolute;
 width:3844px
}
==============

Note the super-huge "width" there. Even with the large margin-left, this element's margin-box is 1722px wide -- and since it's positioned halfway across the screen (with "left: 50%"), it is sufficiently wide to indeed run off the right side of my screen.


One trivial hackaround: you can add "overflow:hidden" to the .intro element, so that the overflow is explicitly clamped to the boundaries of that element (instead of overflowing off the viewport itself & creating scrollable overflow).  That might not be the best solution, though (in part because it means any *legit* overflow in this element would get clamped).  There's probably something more direct we could do to fix this.

Anyway -- I'm hoping one of the web devs who work on this page can figure something out.  Thanks!

Comment 3

[Daniel Holbert [:dholbert]]

BTW, I tested & can reproduce this on Linux and on Win10, with Firefox 56. (used a fresh profile on Linux, for good measure)  So I think this problem is visible on all platforms.

Comment 4

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/bedrock/pull/5161

Comment 5

[[github robot]]

Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/adc470dd90522421adf4f8efe17dfe33c4f726dc
[fix bug 1404444] Quantum page overflow

https://github.com/mozilla/bedrock/commit/a81b31ff26412d4e73c83161c2b3c16d1fe9bc8e
Merge pull request #5161 from craigcook/bug-1404444-quantum-page-overflow

[fix bug 1404444] Quantum page overflow

Comment 6

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/bedrock/pull/5162

Comment 7

[Craig Cook (:craigcook)]

Alas, my previous pull request updated the Quantum info page (www.mozilla.org/firefox/quantum) but not the Firefox 56 whatsnew page where it was originally reported. The same element appears in both places so I've applied the same fix to the whatsnew page as well.

Comment 8

[[github robot]]

Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/f4fd210b7375d5286dfc52ff84ffa81e8e296508
[fix bug 1404444] Fix horizontal scroll on Fx56 whatsnew

Also update other quantum page waves for consistency.

https://github.com/mozilla/bedrock/commit/1707cca1be9e067a464661982b0a945f2442e901
Merge pull request #5162 from craigcook/bug-1404444-quantum-page-overflow

[fix bug 1404444] Fix horizontal scroll on Fx56 whatsnew

Comment 9

[Daniel Holbert [:dholbert]]

Verified fixed at https://www.mozilla.org/en-US/firefox/56.0/whatsnew/ (using Firefox 56 to test).