1427678 - Scrollbars are covering part of a box when scrolling with a trackpad on a touch screen enabled laptop

Status: NEW

(Core :: Layout: Block and Inline, defect, P3)

Description

[Karl Dubost💡 :karlcow]

This is a spin off of webcompat bug https://webcompat.com/issues/3874

This is very specific to touch screen and Firefox on Windows.

To reproduce on macOS, you need to

1. Set your system settings to always show scrollbars.
2. Activate in Firefox the dom.w3c_touch_events.enabled to 1
3. go to  http://www.espn.com/
4. Scroll with the trackpad the top ribbon with the scores. 

You will see that the scrollbar is covering the scores. It seems that Chrome does not. 

Though I'm not sure what is the right resolution for this one.

Comment 1

[sethbc]

Confirmed this happens to me on espn.com in FF58 on Win10.  To make matters stranger, it seems like the issue goes away when I reload the page.

Comment 2

[Jet Villegas (inactive)]

[ Triage 2017/02/20: P3 ]

Comment 4

[Adam Gashlin (he/him) [:agashlin] (ex-moco)]

I noticed that the element "leagues" gets "overflow-x: auto;" on the first load (when the scrollbar appears), and "overflow-x: hidden;" on subsequent loads (when there is no scrollbar, but the element isn't mouse or touch scrollable).

On Chrome it only gets "overflow-x: auto", consistently, and there is:
#leagues::-webkit-scrollbar {
  display: none;
}
which explains why there's no visible scrollbar.

I wonder if ESPN's browser detection isn't working right on the first load.

Comment 5

[Firefox Bug Husbandry Bot]

Migrating Webcompat whiteboard priorities to project flags. See bug 1547409.

Comment 6

[Firefox Bug Husbandry Bot]

See bug 1547409. Migrating whiteboard priority tags to program flags.