Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clicking scrollbar in <select multiple> with overflowed options will select nearby <option> in Chrome #19810

Closed
wengjs opened this issue Apr 27, 2016 · 10 comments

Comments

@wengjs
Copy link

wengjs commented Apr 27, 2016

I use chrome v50.0.2661.87 m.

While option text overflowed, user could select option every single clicking on scrollbar.

Does anyone could reproduce this issue?

Here is the sample code:
https://jsfiddle.net/umt87ojo/1/

And finally I found if:

select > option {
  overflow-x:hidden;
}

and problem solved!!!!

@RyanZim
Copy link

RyanZim commented Apr 27, 2016

Clarification: This only happens with <select class="form-control" multiple>.

Confirmed in Chrome; all other browsers seem to work fine (I didn't check Opera). Edit: I tested in Windows 7

Here is a JSFiddle demonstrating the suggested change: https://jsfiddle.net/a3rkua5p/. I tested this in all browsers (except Opera) and didn't notice any adverse effects. The change does not affect <select> without the multiple attribute.

👍 for implementing this. Perhaps we should also report this to Chrome as this behavior is inconsistent with other browsers.

@RyanZim
Copy link

RyanZim commented Apr 27, 2016

On second thought, perhaps this is within the scope of normalize.css.

CC: @necolas @jonathantneal

@cvrebert cvrebert changed the title v3.3.6 clicking scroll bar in multiple select of overflowed options will select option in chrome Clicking scrollbar in <select multiple> with overflowed options will select nearby <option> in Chrome May 8, 2016
@cvrebert
Copy link
Collaborator

cvrebert commented May 8, 2016

Confirmed in OS X Chrome. Doesn't happen with in a fiddle with only Normalize.css loaded, so something in Bootstrap must be triggering this. Definitely seems like Chrome itself has a bug though.
@RyanZim Did you test in Chrome on Windows or Linux by any chance?

@slavanga
Copy link

slavanga commented May 8, 2016

Confirmed in the latest Chrome on Windows.
The effect seems to be triggered by the border-radius from the .form-control class.

@cvrebert
Copy link
Collaborator

cvrebert commented May 8, 2016

Confirmed that removing the border-radius restores sane behavior.
I'll file a Chrome bug tomorrow.

@mdo mdo modified the milestone: v3.3.7 May 8, 2016
@RyanZim
Copy link

RyanZim commented May 9, 2016

@cvrebert I did my cross-browser testing on Windows 7. I'll try to do some testing in Linux later today.

@RyanZim
Copy link

RyanZim commented May 9, 2016

On Linux (Lubuntu), I cannot reproduce with chrome 48.0.2564.116. My Linux box is 32-bit so I can't test with later releases of Chrome. 😞

@cvrebert
Copy link
Collaborator

cvrebert commented May 9, 2016

Going to assume this is cross-platform since both Windows and OS X are affected.

@cvrebert
Copy link
Collaborator

Known Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=597642

@Herst
Copy link
Contributor

Herst commented Sep 1, 2018

Known Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=597642

Has been "WontFix"ed because it apparently cannot be reproduced anymore.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants