Question

我正试图在链接上添加负面的translateZ。在webkit浏览器中，这样可以正常工作，但如果值低于神奇的-0.1px，则Firefox会破坏悬停/链接/事件侦听器功能。

请注意，仅在块元素和在父元素上设置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中的一个错误还是我错过了什么？我能做些什么让它发挥作用？

谢谢！

Answer 1

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

检查CODEPEN

负的translateZ在Firefox中打破了块元素悬停

1 个答案: