我试着在链接上加上一个负translateZ，在webkit浏览器中，这个方法很好用，但是如果这个值小于一个神奇的-0.1px，Firefox就会破坏hover/link/event listener功能。
注意，只有在block元素和在父元素上设置transform-style: preserve-3d;时才会断开，但是链接仍然是可聚焦的，如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的一个bug还是我遗漏了什么？我该怎么做才能让它工作呢？
谢谢!