禁用按钮在禁用时隐藏答案

【问题标题】：Disabled button is hidden when disabled禁用按钮在禁用时隐藏
【发布时间】：2018-01-18 21:01:22
【问题描述】：

我正在处理一个问题，该问题出现在使用 Chrome 60.0.3112.90 的用户身上，更改按钮的 disabled 属性会隐藏它。

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

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

该元素仍然存在于 DOM 中
该元素没有设置display: none
如果您缩小并再次放大（Ctrl 并滚动）它会再次显示
如果你给 wrap div 添加了 margin 或 padding 属性，它会再次出现

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

问题

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

【问题讨论】：

删除浮动也有帮助。
我不确定您为什么将overflow:hidden 直接应用到您的<button>... 但在我的测试中删除它解决了问题。

标签： css angularjs twitter-bootstrap google-chrome overflow

【解决方案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>

【讨论】：