禁用按钮在禁用时隐藏

Question

我正在处理使用 Chrome 60.0.3112.90 的人出现的问题，其中更改了按钮的 disabled 属性，隐藏了它。

我创建了一个最小的、完整的和可验证的示例，您可以在其中单击 + 按钮来切换 disabled 属性。

https://jsfiddle.net/1wtj8a8a/3/

该元素仍然存在于 DOM
元素没有display: none设置
如果您缩小并再次放大（Ctrl 并滚动）它会再次显示
如果给换行添加边距或填充属性 div，它会再次出现

删除 overflow: hidden 似乎可以解决问题，但我宁愿不这样做，因为按钮上的文本会重叠（在我的实际设置中）。我尝试用 overflow-x: hidden 替换它，但无济于事。

问题

为什么会这样？
除了删除 overflow: hidden，我还能做什么？

Answer 1

我不完全确定为什么会这样，但我之前运行随机消失的元素（通常与 position: fixed 一起）并在元素上使用 translateZ(0)将导致浏览器重新绘制它，确保它不会消失。

angular.module('App',[])
 .controller('MyCtrl', ['$scope', function ($scope) {
   $scope.b = true;
    }
])

div.wrap {
  width: 50px;
}
button {
  overflow: hidden;
  transform: translateZ(0);
}

<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular.min.js"></script>
<body ng-app="App">
<div ng-controller="MyCtrl" >
  <div class="wrap">
    <button class="btn btn-mini pull-left">A</button>
    <button class="btn btn-mini pull-right" ng-disabled="b">B</button> 
  </div>
  <button ng-click="b=!b">+</button>
</div>
</body>

禁用按钮在禁用时隐藏

Disabled button is hidden when disabled

css

google-chrome

overflow

twitter-bootstrap

angularjs

问题