通过使用CSS 3D变换和透视图，我不再能与Firefox中的可单击元素交互，但它在chrome / Safari中有效

Question

bounty到期在7天内。该问题的答案有资格获得+ 100声望赏金。Laetitia Dallinge希望对此问题引起更多关注：“请告诉我，Firefox中的html / css有什么问题，导致链接或按钮不可单击...”

我正在使用css 3d变换构建一个具有paralax的简单页面。在chrome中，一切正常。在firefox中，视差效果很好，但是，我再也无法在按钮或链接上单击了……好像它们前面有东西（但实际上，我无能为力！）。

我进行了很多搜索，但找不到原因。这是网站的链接

https://dev.dallinge.ch/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效果。

Answer 2

我从未尝试像您一样构建html + css布局，但是肯定会过度使用属性：

-moz-transform-style: preserve-3d。

[w3schools article指出：

此属性必须与transform属性一起使用。

[我在写这篇文章时，前一个回答者@Jenny Pittman也提到过这一点，所以希望您不会生气：）

所以我做的是禁用了这段代码：

.site-content > .inside #primary #main > article > .entry-content {
    -moz-transform-style: preserve-3d;
}

在文件all.css的第999行中。

为了使其他元素正确显示，我将position: relative添加到CSS的主要部分，如下所示：

body:not(.has-sidebar):not(.search):not(.archive).home .entry-header-single > *, body:not(.has-sidebar):not(.search):not(.archive).home .page-content > *, body:not(.has-sidebar):not(.search):not(.archive).home .entry-footer > *, body:not(.has-sidebar):not(.search):not(.archive).home .entry-content-single > *, body:not(.has-sidebar):not(.search):not(.archive).home .post-navigation, body:not(.has-sidebar):not(.search):not(.archive).home .uagb-section__inner-wrap, body:not(.has-sidebar):not(.search):not(.archive).home .wp-block-group__inner-container {
    max-width: 1000px;
    width: 82%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

在第881行的all.css文件中。

而且有效！

希望这会有所帮助。