Angular $digest cycle makes Chrome 50's opened <select> blink

Question

This question shows a problem that when a <select>'s optionlist is bind to some value of the $scope, the $scope's digest event will cause the opened <select> blinks.

However, I found that the blinking effect only happens on my Chrome 50 on OS X, i.e. I will see no blinking if the $digest occurs when a list is opened on my Firefox in OS X or on my Chrome in Windows.

Would this be a bug of Chrome? How to prevent this effect? Because if no element of the options is changed, people don't want to see the <select> element blinking.

I am working on an example that could see the effect with minimum code online. An example from my current project is attached below.

<select class="form-control" ng-model="application.choiceOfTeams[0]" ng-options="team.name for team in teams">
    <option value="">-- select team --</option>
</select>
<select class="form-control" ng-model="application.choiceOfJobs[0]"
            ng-show="application.choiceOfTeams[0].jobs"
            ng-options="job.name for job in application.choiceOfTeams[0].jobs">
    <option value="">-- select position from {$ application.choiceOfTeams[0].name $} --</option>
</select>

Answer 1

It sounds like the same problem as the post you linked.

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; }