CSS动画在隐藏后停止，然后在Chrome中显示

Question

我有一个模态叠加，其中css微调器在第一次加载时旋转，隐藏后再显示微调器不再旋转。

这只发生在Chrome中，只有当微调器从一开始就不可见时才会发生（即如果div被隐藏然后切换 - 动画按预期发生）。这是一个错误还是我错过了什么？

编辑这似乎是它不喜欢的可见性，评论出来，一切都按预期执行

它似乎也是一个错误，在Canary 46中表现如预期

编辑我虽然这是重复的：CSS infinite animation after hidden is not resetted (Chrome)，但是在同一版本的Chrome中有效

document.getElementById('toggle').onclick = function() {
  document.getElementById('loader').classList.toggle('out');
}

#holder {
  margin-top: 50px;
  position: relative;
  height: 300px;
  background: #cc0000
}
.loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  text-align: center;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.5);
  overflow: hidden;
  visibility: visible;
  opacity: 1;
  -webkit-transition: opacity .5s linear;
  -moz-transition: opacity .5s linear;
  -o-transition: opacity .5s linear;
  transition: opacity .5s linear;
}
.loader.out {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.5s, opacity 0.5s linear;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div>
  <button id="toggle">Toggle Overlay</button>
</div>

<div id="holder">
  <div class="loader" id="loader">
    <i class="fa fa-spinner fa-spin fa-5x"></i>
  </div>
</div>