css - 负translateZ破坏了Firefox中的块元素悬停

我试图在链接上放置一个负的translateZ。在webkit浏览器中，这可以正常工作，但是如果Firefox的悬停/链接/事件侦听器功能的值低于神奇的-0.1px，则会中断该功能。

请注意，仅在块元素上以及在父元素上设置transform-style: preserve-3d;时，它才损坏。但是，如代码笔所示，该链接仍可聚焦。

<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中的错误还是我遗漏了一些东西？我该怎么做才能使其正常工作？

谢谢！

最佳答案

使用transform: perspective(0px) translateZ(-0.2px);

检查CODEPEN