Bootstrap: .form-control <select> flickers/flashes in OS X Chrome v50 & v51

[caroso1222]

This started happening recently when I updated Chrome for Mac to v50.

Whenever I set .form-control to a select element, I will start flickering when activated. It's really annoying and haven't ever run into this issue before. I made a video so you can see what's going on. https://www.youtube.com/watch?v=Z04pW9Jkgso

The only workaround I found is to disable the transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; property of .form-control for select elements. I've been able to replicate this bug on two more machines.

I might be omitting details so if you need more details about my environment I can provide with no problem.

Thanks!

[wolfy1339]

Whats your complete Chrome and OS X version

[caroso1222]

@wolfy1339 Chrome: Version 50.0.2661.94 (64-bit). OSX: 10.11.4.

[RyanZim]

@caroso1222 Your video is private so I can't see it. Please provide a JSFiddle/JSBin. Are you using Bootstrap v3 or v4?

[caroso1222]

Hi @RyanZim. I'm so sorry, I just disabled the private property of the video. I'm working of the JSFiddle. I'm working with Bootstrap v3.3.6.

Thanks!

[bryanskene]

Me too, same symptoms. Number of flickers doesn't depend on number of items in dropdown selector. It can vary as I navigate around to other pages, then return. In my Gemfile.lock: twitter-bootstrap-rails (3.2.0). Chrome Version 50.0.2661.94 (64-bit), OSX 10.11.4. Seemed to start around 2w ago. Any pointers on root cause would be appreciated. Off to try the workaround, thanks for that.

[bryanskene]

BTW, awesome, many thanks for that hint, this has been bugging us for weeks and our team thanks you! Added this to our .css and problem solved!

select.form-control { transition: none; }

[slgriffiths]

Just ran into this issue after updating to latest version of Chrome.

Adding the transition: none override to select tags with form-control fixed it for me. Currently midway through a BS2 -> BS3 upgrade and this was bothering me. Thanks!

[RyanZim]

Looks like a browser bug to me.

CC: @cvrebert

[cvrebert]

Definitely a browser bug, although I haven't been able to reproduce with a trivial JS Bin I whipped up.
@caroso1222 Looking forward to seeing your JS Fiddle.

[martin-walsh]

OS: OSX 10.11.4 (15E65)
Browser: Chrome Version 50.0.2661.102 (64-bit)

[cvrebert]

@martin-walsh JS Bin, jsFiddle, or video please.

[vecmezoni]

https://bugs.chromium.org/p/chromium/issues/detail?id=613885
https://github.com/jquery/jquery-mobile/issues/8429#issuecomment-220557111

[nagarakesh4]

same issue for me too.

OS: OSX 10.11.3
Browser: Chrome Version 50.0.2661.102 (64-bit)

[cvrebert]

Has anyone observed this problem on Windows or Linux?

[cvrebert]

@bryanskene @slgriffiths @nagarakesh4 Could you please make a JS Bin, jsFiddle, or similar that demonstrates the problem? Without a testcase, I can't really file a good bug against Chrome. Thanks in advance.

@vecmezoni That bug seems to be Android-specific, whereas this bug is OS X-specific so far. Though it's possible there could be some relation.

[RyanZim]

I can test on windows when we get a testcase.

[SourceCode]

OSX: 11.5 Chrome: 50.0.2661.102 (64-bit) - latest bootstrap. Select flashes twice on open.

You can see this in action here:

[cvrebert]

@SourceCode We need a live example, not a screenshot. Do you experience this problem on getbootstrap.com?

[danoc]

I've seen this bug outside of Bootstrap and was also able to prevent the flashing by killing the transition. Wasn't able to create a test case though and have a feeling that it may only happen on heavy pages.

[SourceCode]

If I use it in the most basic example and just a small piece of the code in a fiddle it does not happen but unfortunately in more complex scenarios it does seem to happen (more libraries, more controls, more 'things' happening).

I'm working to isolate it but I am at a conference which is why I could only supply a quick screen capture to illustrate what I and other users are observing. It could be unrelated to bootstrap - however this is the very first result when searching for this issue in google. If I locate the cause I will update the thread but that may be some time.

[RyanZim]

@SourceCode Do you experience this problem on getbootstrap.com?

[cvrebert]

Filed Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=614838
Please star it, folks.
(Testcases would still be greatly appreciated and very helpful.)

[caroso1222]

@cvrebert thanks! starred.

[fczbkk]

I have managed to isolate and reproduce the problem: https://jsfiddle.net/fczbkk/jhdsua5k/

[RyanZim]

@cvrebert I tried the testcase on Windows and am unable to reproduce there. I'm guessing it's OS X-specific.

[cvrebert]

@fczbkk You seem to have found a different bug (related to DOM attribute mutations) which also causes the same type of flickering.

[cvrebert]

The relevant bug for this might be https://crbug.com/608140 , which was fixed as of Chrome 51.0.2704.54.
Can y'all please re-test with up-to-date stable Chrome?

[ochong]

Are we sure it's not the other issue that was reported by @fczbkk? https://crbug.com/616197

[cvrebert]

We're not completely sure of anything at this point.

[Jakobud]

Using OSX 10.10.5 (Yosemite) and Chrome 50.0.2661.102 (64-bit)

I DO NOT get the flashing select menu on this page:

https://jsfiddle.net/fczbkk/jhdsua5k/

[ryanguill]

El Capitan 10.11.5, Chrome Version 51.0.2704.103 (64-bit) I _do_ get the flashing, fwiw.

[cvrebert]

@ryanguill Could you please post a comment on https://bugs.chromium.org/p/chromium/issues/detail?id=608140 with the same information, to let the Chrome folks know?

[ryanguill]

I am not able to reproduce with the codepen in that bug, but was able to with the jsfiddle in this one https://bugs.chromium.org/p/chromium/issues/detail?id=616197 - and I have posted there.

[cvrebert]

@ryanguill The issue that that was duped to (https://bugs.chromium.org/p/chromium/issues/detail?id=614250 ) is supposed to have been fixed in v52. Could you re-test using Chrome Canary?

[ryanguill]

I just downloaded canary - can confirm that everything looks to be fixed both with that fiddle example and with my personal test case that brought me here.

[cvrebert]

Going to assume at this point that Chrome 52 has fixed the relevant bugs.
I'll be happy to reopen this if anyone observes the problem in Chrome 52+.