Closed Bug 1327558 Opened 7 years ago Closed 7 years ago

Dropbox: Keyboard scrolling doesn't work in Firefox

Categories

(Web Compatibility :: Site Reports, defect)

Product:
Web Compatibility
Component:
Site Reports
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(platform-rel +)

Status:
RESOLVED FIXED
Tracking Flags:
Tracking Status
platform-rel --- +

People

(Reporter: arni2033, Unassigned)

References

(
URL
)

Details

(Whiteboard: [platform-rel-Dropbox]) 

>>>   My Info:   Win7_64, Nightly 49, 32bit, ID 20160526082509
STR_1:
1. Open url [1] in a private window. Resize Firefox window to make iframe scrollable
2. Click in iframe (or click on the free place in header)
3. Press Down key (or Up key, or PageUp/PageDown)

AR:  No visible action
ER:  Page should just scroll according to the pressed key

> [1] data:text/html,<script>location.href="https://www.drop"+"box.com/s/ghfwg1yd8rllw33/test%202016.07.16%2002-37-02.js?dl=0"</script>


Notes:
1) Function _verticalScroll sets scrollTop to <body>, not to <html>. This works in GoogleChrome,
   but doesn't work in Firefox (by the way, _horizontalScroll is also broken)

https://www.dropbox.com/static/javascript/preview_html_rams.js?v=3
Line 161
    _verticalScroll: function(scrollDistance) {
      $viewerContainer = $j("body");
      $viewerContainer.animate({scrollTop: $viewerContainer.scrollTop() + scrollDistance}, 50);
    },

2) You can also tell them that:
 2.1) Even in GoogleChrome, Shift+Spacebar doesn't scroll the page to the top. It's not an issue for
      me anyway, as I DON'T use this obtrusive way of scrolling (that also breaks web pages)
 2.2) if in Step 2 I click in the header, Home and End buttons don't work in Firefox and GoogleChrome
 2.3) Ctrl+Up/Down button in Firefox is treated as Up/Down, not as Home/End
No longer blocks: 1277113
Component: Untriaged → Desktop
Product: Firefox → Tech Evangelism
platform-rel: --- → ?
Whiteboard: [platform-rel-Dropbox]
platform-rel: ? → +
Flags: needinfo?(miket)
Keyboard scrolling in Firefox (OSX/Windows) and Chrome (OSX) is indeed busted, but working in Chrome (Windows).

(for whatever reason, document.scrollingElement is returning different results in Chrome Canary for Windows and OSX... O-o).

The fix is pretty simple, like arni mentioned, in https://www.dropbox.com/static/javascript/preview_html_rams.js?v=3:

Just change 

> $viewerContainer = $j("body");

to 

> $viewerContainer = $j(document.scrollingElement);

That won't work for older browsers, so something like the following will be more compatible:

> $viewerContainer = $j("body, html");

Adam, can we get in touch with Dropbox about this?
Flags: needinfo?(miket) → needinfo?(astevenson)
Whiteboard: [platform-rel-Dropbox] → [platform-rel-Dropbox][contactready]
Reached out via the Dropbox mailing list.
Flags: needinfo?(astevenson)
Whiteboard: [platform-rel-Dropbox][contactready] → [platform-rel-Dropbox][sitewait]
This should be resolved now. Thank you for letting us (Dropbox) know! Is there anything I need to do to close this out?
That's great, thanks Mike! It works for me now in Firefox 55 for OSX.
Status: NEW → RESOLVED
Closed: 7 years ago
Resolution: --- → FIXED
Whiteboard: [platform-rel-Dropbox][sitewait] → [platform-rel-Dropbox]
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.