遷移中にテキストシャドーが奇妙に見える

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"> 
 
\t <span>Homepage</span> 
 
\t <div class="line"></div> 
 
\t <span>Nav item 1</span> 
 
\t <div class="line"></div> 
 
\t <span>Nav item 2</span> 
 
\t <div class="line"></div> 
 
</div>

私はいくつかの実験をした、と#box修正問題にposition: fixedを無効にします。また、box-shadowを無効にすると問題は解決しますが、これらのスタイルを両方とも適用する必要があります。クローム49を使用して

勝利8.1 Proの上（のx86）（x64）の

Answer 1

ちらつきは非常に微妙ですが、私はそれはの推移によって引き起こされるクロム49でそれを見ることができました.lineのopacity。

上のopacityのトランジションを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)}