text-shadow sieht im Übergang seltsam aus

Question

Wenn Sie im folgenden Beispiel den Mauszeiger über die Navigationsleiste bewegen, wird sie erweitert. Während es sich ausdehnt, sieht der Text, Text-Schatten, um genauer zu sein, komisch aus.

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>

Ich habe einige Experimente und position: fixed auf den #box behebt das Problem zu deaktivieren. Auch die Deaktivierung der box-shadow behebt das Problem, aber ich muss beide Stile beibehalten.

Mit Chrome 49 (x86) auf Win 8.1 Pro (x64)

Answer 1

Das Flackern ist sehr subtil, aber ich war in der Lage es in Chrome, 49. Es wird durch den Übergang von der verursacht opacity der .line.

Durch Ersetzen der opacity Übergang auf .line mit einer border-color Übergang das Flimmern ist behoben.

.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)}