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

Projects
None yet
6 participants
@wengjs
Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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 cvrebert added the confirmed label May 8, 2016

@cvrebert

This comment has been minimized.

Copy link
Member

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Member

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Member

commented May 9, 2016

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

@cvrebert

This comment has been minimized.

Copy link
Member

commented May 17, 2016

cvrebert added a commit that referenced this issue Jun 2, 2016

cvrebert added a commit that referenced this issue Jun 2, 2016

@cvrebert cvrebert closed this in 4985ff9 Jun 3, 2016

@Herst

This comment has been minimized.

Copy link
Member

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
You can’t perform that action at this time.