Firefoxで否定翻訳をブロックするとブロック要素が壊れます

リンクに負のtranslateZを挿入しようとしています。 Webkitブラウザでは正常に動作しますが、値が魔法の-0.1pxより低い場合、Firefoxはホバー/リンク/イベントリスナーの機能を無効にします。Firefoxで否定翻訳をブロックするとブロック要素が壊れます

ブロック要素と親要素にtransform-style: preserve-3d;を設定した場合にのみ壊れていることに注意してください。しかし、リンクは、codepenに示されているように、まだフォーカス可能です。 codepen

<a class="arrow" href="#bla"> 
    <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> 
    <path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z"></path> 
    </svg> 
</a>

body { 
    transform-style: preserve-3d; 
} 

.arrow { 
    width: 3rem; 
    height: 3rem; 

    display: block; 
    border: 2px solid black; 
    background: white; 

    // Breaks hover for values lower than -0.1px 
    transform: translateZ(-0.2px); 
} 

// This should work, but is broken in Firefox 
.arrow:hover { 
    background: red; 
}

例： https://codepen.io/anon/pen/yXmgZZ?editors=1100

が、これは正常な動作です、それは単にFirefoxのバグですか、私は何かが足りないのですか？私はそれを動作させるために何をすることができますか？

ありがとうございます！

出典

2017-07-20 kulturfunker