Issue metadata
Sign in to add a comment
|
Regression: drag scrolling on {user-select: none} no longer works
Reported by
s...@benchling.com,
Apr 21 2017
|
||||||||||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36 Steps to reproduce the problem: 1. Open attachment. 2. Mouse down on the "item 1" in the first container and move mouse below that container. 3. Mouse down on the "item 1" in the second container and move mouse below that container. What is the expected behavior? First container scrolls to bottom. Second container scrolls to bottom. What went wrong? The second container does not scroll at all. Did this work before? Yes 56.0.2924.87 Does this work in other browsers? Yes Chrome version: 57.0.2987.133 Channel: n/a OS Version: OS X 10.11.6 Flash Version: Shockwave Flash 25.0 r0 This affects Benchling's sequence viewer, accessible here: https://benchling.com/s/SAMPLEPLASMID/edit We rely on the browser's native drag scrolling behavior but disable the native selection since we need more fine-grained control over how selection works. A handful of users have reported this to us as this is a common way of making a large selection that goes below the fold. Workaround is fairly awkward: for touchpad users, one finger to mouse down, two fingers to scroll; for mouse users, one finger to mouse down, another finger to scroll.
,
Apr 22 2017
Reproduced on Windows 7 using Chrome 57. Using BrowserStack, also confirmed as a regression - Chrome 56 works fine. Unfortunately, this looks like an intentional change. See r436317 and issue 588448 . Assigning and adding folks as CC to make a final decision, but this is probably a WontFix. :(
,
Apr 22 2017
As it turns out Firefox has similar behavior.
My workaround was to ensure any scrollable container has {user-select: text} and renders the selection as hidden. LESS to achieve that:
.draggable-container {
// Using {user-select: none} instead does not work in Chrome / Firefox; see: https://crbug.com/714234
&, * {
&::selection {
background: transparent; // `none` does not work in Safari?
}
&::-moz-selection {
background: transparent; // Firefox does not handle ::selection correctly?
}
}
-moz-user-select: text;
-webkit-user-select: text;
-ms-user-select: text;
user-select: text;
}
,
Apr 23 2017
Does not appear to be a Blink>CSS issue. Removing the component.
,
Apr 24 2017
The change was intentional and intended to improve interop. The behavior is the same across Firefox and Edge so I'd like to keep it that way. In the sequence viewer you posted there's nothing being dragged so IMO the browser shouldn't autoscroll - I consider it a bug that we used to. In this case it'd make sense to implement your own autoscroll in JS or use the workaround you posted. |
|||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||
Comment 1 by s...@benchling.com
, Apr 21 2017