ff/ieのCSS六角レンダリングの問題

Question

私はこのサイトではクロムで正しく動作していますが、FFとIEではレンダリングの問題があります。

http://wrausch.de.w013b68e.kasserver.com/

あなたはFF/IEで六角メニューを合わせると、あなたが完全にhovereffectでカバーされていない2本の青線を見ることができます。

私はちょうどどこから始めたのか分からない同僚からサイトを取得しています。

ご協力いただければ幸いです。 ありがとう

Answer 1

変形された要素 - 六角形の作成に使用された斜めの要素のように - ピクセルの端数で測定される位置になります。そのため、ブラウザは要素を画面上に表示する方法を判断する必要がありますブロック的なピクセルのグリッド内に数学的に完全な形状を表現する必要がある。

2つの透明な要素が隣り合っていて、この丸めによってわずかに重なっています。要素はわずかに透明であるため、重複する部分は暗い線として表示されます。

数学的には、要素は接触していませんが、ブラウザの表現と単純化のために、わずかに重なっています。

Firefoxでは、移行が完了したときにのみ行が表示されます。これは、アニメーション中にレンダリングエンジンが完了したときとは異なる動作をするために発生します。

これを修正するには、ユーザーが移動するときに完全に不透明な背景色を使用してみます。そのようにしても、劇的なオーバーラップは色の変化を引き起こしません。