角度选择闪烁

Question

我有一个带有属性的简单<select></select>内部,例如:<div>ng-show

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

现在出于某种原因,当我点击select打开它时,它会闪烁,就像选择是非常快速地打开/关闭一样.有时会眨眼两次,有时甚至更多.我曾经使用过select有角度的盒子而且从来没有这个.

我发现了导致它的原因.它出现的完整形式如下:

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

当显示表单时,第一个<input>(选中的单选按钮)被聚焦,当我点击<select>打开它时,$apply将发生一个(这是Angular的基本行为,没有自定义)导致<select>重新编译？如果我点击任何地方,那么它<select>不会闪烁,或者我手动模糊它,就像$(':focus').blur();它不闪烁一样.

注意:表单在对话框(ngDialog)中,不确定是否有所不同

Answer 1

似乎是这个错误：

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

正如评论中所建议的，在选择上将 transition 设置为 none 已经解决了这个问题，在我的情况下（使用引导程序）使用以下方法：

select.form-control { transition: none; }

要在没有引导的情况下使用，或者在不使用 .form-control 类的情况下，只需删除 .form-control 选择器并确保没有其他东西覆盖选择元​​素上的转换属性：

select { transition: none; }