-Webkit-Filter und Übergang macht Videoelement Flimmer in Chrome

Question

Ich benutze CSS-Filter (-webkit-Filter) mit Übergang, um die Helligkeit und Deckkraft einiger SVG-Symbole zu ändern, wenn Sie über sie schweben. Es funktioniert wie erwartet auf den Symbolen, aber es lässt auch ein Videoelement auf der Seite während des Übergangs flimmern. Wenn ich den Übergang entferne, flimmert das Video nicht. Hier die entsprechenden Bits des Codes:

HTML:

<div class="icon"></div> 
<video src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" controls> 
    Your browser does not support the <code>video</code> element. 
</video> 

CSS:

.icon { 
    background: url("https://upload.wikimedia.org/wikipedia/commons/2/21/Speaker_Icon.svg") no-repeat center; 
    height: 50px; 
    width: 50px; 
    background-size: 50px; 
} 

.icon:hover { 
    -webkit-filter: opacity(.5); 
    transition: all .5s ease; 
} 

Um das Problem in Aktion zu sehen, schweben über das Symbol in this JSFiddle, und merken, wie das Video-Element bekommt ein bisschen dunkler für einen kurzen Moment.

Das Problem scheint nur in Google Chrome auftreten (Ich bin auf Version: 51.0.2704.106, 64-Bit, Update: gleichen Ergebnis in der Version: 52.0.2743.116).

Mache ich etwas falsch oder ist das ein Bug in Chrome? Gibt es eine andere Möglichkeit, ein ähnliches Verhalten für das Symbol zu erstellen (ohne das Video zu beeinflussen)?

Answer 1

Ich hatte das gleiche Problem, aber ich stellte die opacity Eigenschaft statt filter. Ich habe es behoben, indem ich transform-style: preserve-3d; zu dem Element hinzugefügt habe, dessen Deckkraft geändert wurde.