MS Edge CSSのトランジションがちらつく

Question

私はMS EdgeのCSSトランジションに奇妙な問題があることに気付きました。

例えば、ホバー状態間の遷移があるが、それらのホバー状態に対して定義されたスタイルがCSSカスケードに上書きされる場合、Edgeはトランジションの間、上書きされたスタイリングに切り替わり、その後に戻ってください。

問題はここにもかなりよく説明されています https://www.webmasterworld.com/css/4791912.htm

私は問題を実証ペンをも作成しました： http://codepen.io/powerbored/pen/OWqXRw

a { 
    transition: all 2s ease-in; 
    color: orange; 
} 

a div { 
    color: lightblue; 
    // displays in light blue in all browsers except during transitions in Edge 
} 

a:hover { 
    color: red; 
} 

私はエッジが正確に偉大なブラウザが、私ではありません知っています私が本当に見たいのは、ここで何が実際に起こっているのか、それがどうして起こりうるのかという説明です。

Answer 1

transition-property: allには、子孫要素が遷移中にMicrosoft Edgeで指定された値を無期限に保持するのではなく、アニメーション化された値を継承するようなものがあります。これは、Microsoft EdgeのCSSトランジションの実装に特有のようで、のInternet Explorerも正しく動作し、transition-propertyがallの場合にのみ発生します。トランジションが必要なプロパティのみを指定すると、Microsoft Edgeが正しく動作します。

これはすべて私があなたに伝えることです。まあ、それは、これが間違った動作であるという明らかな事実です。