Chrome мигает черным экраном при использовании перехода css

Вращение перехода приводит к тому, что хром выдает черный экран. Это ошибка Chrome (отлично работает в Safari), или она может быть исправлена ​​с помощью некоторых умных css.

div { 
  width:200px; 
  height:200px; 
  position:relative; 
  background:#ddd;
}

span { 
  display:inline-block; 
  position:absolute; 
  top:40px; 
  left:40px; 
  width:20px; 
  background:#007; 
  height:10px; 
  -webkit-transition: all .5s; 
}

div:hover > span { 
  -webkit-transform: rotate(180deg); 
}
<div>
    <span></span>
</div>

Ответы

Ответ 1

Вы можете исправить это, заставив композицию оставаться включенным, предоставив -webkit-transform: translate3D(0, 0, 0) родительскому элементу преобразованного элемента.

div { width:200px; height:200px; position:relative; background:#ddd; -webkit-transform: translate3D(0, 0, 0)}
span { display:inline-block; position:absolute; top:40px; left:40px; width:20px; background:#007; height:10px; -webkit-transition: -webkit-transform .5s; }
div:hover > span { -webkit-transform: rotate(180deg); }
<div>
  <span></span>
</div>