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

正如评论中所建议的，在select上设置转换为none已经解决了问题，在我的情况下（使用bootstrap）使用以下内容：

select.form-control { transition: none; }

如果没有引导程序，或者没有使用.form-control类，只需删除.form-control选择器，并确保没有其他任何内容覆盖select元素的transition属性：

select { transition: none; }

Answer 2

Chrome版本51.0.2704.63

似乎已修复此问题

角度选择闪烁

2 个答案: