IE/Edge - 移動時のCSS3トランジションの実行

Question

トップナビゲーションバーと<main>要素を含め、ページ上の複数の要素に幅と高さのトランジションが割り当てられています。ユーザーがページのサイズを変更すると、要素がアニメーション化されて幅/高さなどが変更されます。

これは、新しいページに移動する場合を除いて正常に動作します。ページが読み込まれると、要素は割り当てられた最大幅から標準幅にアニメートされます。これはmax-widthからwidthにアニメーションではなく、次のようなものされていません。この現実の例では

nav { 
    height: 25px; 
    transition: all 0.2s ease-in-out; 
} 
@media all and (max-height: 200px) { 
    nav { 
     height: 50px; 
    } 
} 

、ページのロード時、ナビゲーションバーは、25ピクセルにアニメーション化は50pxの高さを有します。 CSSが示唆するように、すぐに25pxになるはずです。

不要なアニメーションは、ロードするのではなくナビゲートしているように見えます。読み込まれたページでF5キーを押すとアニメーションが表示されず、すべてが期待通りに表示されます。サイト内の新しいページに移動すると、たとえばnavbarは50pxから25pxにアニメーションされ、<main>要素は100％幅からビューポートの適切な割り当て幅にアニメーション化されます。それは最も不快な効果です。

アドバイスをいただければ幸いです。私はこの問題を調査し続けています。

イルミオン

Answer 1

解決策が見つかりました。

これはIE/Edge固有の問題です。 this questionの著者は、2014年に非常によく似た問題をMicrosoftサポートに連絡しました。EdgeHTMLまたはIEのいずれの修正もまだありません。

メディアのクエリを@media all and (min-height: 1px) and (max-height: 200px)に変更する簡単な回避策があります。何らかの理由でIE/Edgeが不適切なメディアクエリを適用していて、クエリに暗黙のうちに最小幅を実現していないように見えるからです。

私はEdgeHTML問題追跡ツールで自分のバグレポートを提出します。これは2年間報告されており、まだ奇妙な回避策が残っています。