在过渡期间，文字阴影看起来很奇怪

Question

在以下示例中，当您将鼠标悬停在导航栏上时，它会展开。当它扩展时，文本，文本阴影更具体，看起来很奇怪。

body {
  background-color: gainsboro;
  margin: 0;
}
#box {
  position: fixed;
  width: 200px;
  height: 100vh;
  background-color: rgb(100,150,165);
  box-sizing: border-box;
  transition: width .5s;
  overflow: hidden;
  border-right: 1px solid rgba(0,0,0,.1);
  box-shadow: 1px 0 2px rgba(0,0,0,.25), inset -1px -1px 0 rgba(255,255,255,.075);
  white-space: nowrap;
}
span {
  font-family: arial;
  color: rgba(255,255,255,.65);
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
  display: inline-block;
  margin: 20px;
}
.line {
  border-bottom: 1px solid rgba(255,255,255,.2);
  opacity: 0;
  transition: opacity .2s;
}
#box.narrow {
  width: 15px;
}
#box.narrow:hover {
  width: 200px;
}
#box.narrow:hover .line {
  opacity: 1;
}

<div id="box" class="narrow">
	<span>Homepage</span>
	<div class="line"></div>
	<span>Nav item 1</span>
	<div class="line"></div>
	<span>Nav item 2</span>
	<div class="line"></div>
</div>

我做了一些实验，并在position: fixed上停用#box修复了问题。同样禁用box-shadow可以解决问题，但我需要同时保留这两种样式。

在Win 8.1 Pro（x64）上使用Chrome 49（x86）

Answer 1

闪烁是非常微妙的，但我能够在Chrome 49中看到它。它是由opacity .line的过渡引起的。

通过opacity转换替换.line上的border-color转换，闪烁是固定的。

.line {
  border-bottom: 1px solid rgba(255,255,255,0);
  transition: border-color .2s;
}
#box.narrow:hover .line {
border-color:rgba(255,255,255,.2)}