html - 通过使用 css 3d 转换和透视，我无法再与 Firefox 中的可点击元素进行交互，但它适用于 chrome/Safari

Question

我正在使用 css 3d 转换构建一个带有视差的简单页面。在 chrome 中，一切正常。在 Firefox 中，视差效果效果很好，但是，我无法再单击按钮或链接...好像有什么东西在它们前面(但实际上，我什么都想不到!)。

找了很多都没有找到原因。这是网站的链接

https://dallinge.dev/wp/maismec/ 你知道什么阻止链接/按钮在 Firefox 中工作吗？是错误吗？

提前致谢!

Answer 1

虽然我没有确切的解决办法，但我确实有一个原因。在 Firefox 中打开 Inspector 后，我发现如果我关闭你的链接就可以点击了:

.site-content {
    -moz-transform-style: preserve-3d;
}

或者如果我将它设置为:

.site-content {
    -moz-transform-style: flat;
}

此样式在第 986 行的 all.css 中定义。

虽然我无法说明 -moz-transform-style 的最佳使用方式，但我可以建议您研究如何使其与您的图层一起使用或为 Firefox 关闭它。您应该能够为其他浏览器保留漂亮的 3d 效果。