使用 css 3d 变换和透视，我无法再与 Firefox 中的可点击元素交互，但它在 chrome/Safari 中有效

Question

我正在使用 css 3d 变换构建一个带有视差的简单页面。在 chrome 中，一切正常。在 firefox 中，视差效果很好，但是，我不能再点击按钮或 links... 好像有什么东西在它们前面（但实际上，我想不出什么！）。

找了很多都没找到原因。这是网站link

https://dallinge.dev/wp/maismec/ 您知道是什么阻止 links/buttons 在 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

我不经常使用 CSS 转换，但属性:

肯定有过度使用的情况

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

正如w3schools article指出的那样：

This property must be used together with the transform property.

之前的回答者@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;
}

在文件 all.css 的第 881 行。

编辑：

我注意到执行上述操作会隐藏您拥有的第二张全屏照片。所以我建议将这个元素和它的下一个邻居移出它们的父元素：

<div class="entry-content entry-content-single">
  ...
  <div class="wp-block-image size-full is-resized parallax">...</div>
  <div class="wp-block-group team">...</div>
</div>

然后像这样将它们放在旁边：

<div class="entry-content entry-content-single">...</div>
<div class="wp-block-image size-full is-resized parallax">...</div>
<div class="wp-block-group team">...</div>

这应该有所帮助。

您可能还想禁用此功能：

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

在文件 all.css 的第 997 行。

使用 css 3d 变换和透视，我无法再与 Firefox 中的可点击元素交互，但它在 chrome/Safari 中有效

With the use of css 3d transforms and perspective, I can't interract anymore with clickable elements in Firefox, but it works in chrome/Safari

html

css

3d

transform

perspective