Angular select blinking

Question

I have a simple <select></select> inside a <div> with a 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 the select to open it, it will be blinking like if the select was opening/closing really quickly. Sometimes it blinks twice, sometimes more. I have used select boxes with angular before and never had this.

I found out what was causing it. The complete form where it happens looks like:

<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 radio button) is focused, and when I click on the <select> to open it, an $apply will occur (this is the basic behavior of Angular, nothing custom) causing the <select> to recompile? If I click anywhere, then the <select> will not blink, or it I blur it manually like $(':focus').blur(); then it does not blink either.

Note: the form is in a dialog (ngDialog), not sure if that makes a difference

Answer 1

It appears to be this bug:

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

As suggested in the comments, setting transition to none on the select has worked around the problem, in my case (with bootstrap) using the following:

select.form-control { transition: none; }

For use without bootstrap, or where not using the .form-control class, simply drop the .form-control selector and make sure nothing else is overriding the transition property on select elements:

select { transition: none; }