Angular select flicker

Question

I have a simple <select></select> inside a <div> with the ng-show attribute, something like:

 <div ng-show="edit"> <select ng-options="key as value in VALUES"></select> </div> 

Now for some reason, when I click on select to open it, it will blink, as if the selection was open / close very quickly. Sometimes it blinks twice, sometimes more. I used select boxes with angular before and never had this.

I found out what caused this. The full form in which this occurs looks like this:

 <form class="mb-lg" name="formValidate" ng-init="addCreate = '.action_add'" novalidate="" role="form"> <label class="radio-inline c-radio"> <input id="action_add" name="add_create" ng-model="addCreate" required="required" type="radio" value=".action_add"> <span class="fa fa-circle"></span> Add to existing </label> <div class="form-group has-feedback"> <select class="form-control" name="selected" ng-disabled="addCreate != '.action_add'" ng-model="selected" ng-options="p as p.name for p in portfolios | filter : {'update?': true}" ng-required="addCreate == '.action_add'" required="required"></select> </div> <label class="radio-inline c-radio ng-binding"> <input id="action_create" name="add_create" ng-model="addCreate" required="required" type="radio" value=".action_create"> <span class="fa fa-circle"></span> Or Create new one </label> <div class="form-group has-feedback"> <input class="form-control" name="name" ng-disabled="addCreate != '.action_create'" ng-model="new" ng-required="addCreate == '.action_create'" disabled="disabled"> </div> </form> 

When the form is displayed, the first <input> (the selected switch) is focused, and when I click on <select> to open it, $apply will appear (this is the main behavior of Angular, nothing unusual), forcing <select> recompile? If I click somewhere, then <select> will not blink, or I manually blur it like $(':focus').blur(); then it also does not blink.

Note: the form is in the dialog box ( ngDialog ), not sure if it matters

Answer 1

This error seems to be:

https://bugs.chromium.org/p/chromium/issues/detail?id=613885

As suggested in the comments, setting the transition to nobody in the control did not solve the problem, in my case (with download), using the following:

 select.form-control { transition: none; } 

For use without bootstrapping or where the .form-control class is not used, simply uncheck the .form-control selector and make sure that nothing else overrides the transition property for the selected elements:

 select { transition: none; } 

Answer 2

This seems to be fixed with the release of Chrome 51.0.2704.63