在 Firefox 上具有变换 3D 和过滤器模糊的背景中心

Posted 2023-05-08

【中文标题】在 Firefox 上具有变换 3D 和过滤器模糊的背景中心

【英文标题】：Background center with transform 3D and filter blur on Firefox

【发布时间】：2017-10-12 05:00:54

【问题描述】：

inb4：对于需要超长加载的可怕的超大图像，如果您不想等待，请点击链接并阅读问题！

所以我正在制作一个网站的this prototype，在那里我制作了一个假的 3D 效果，其中 2D 图像随鼠标移动。当用户单击其中一个三角形以将焦点放在弹出窗口上时，我想使用过滤器模糊。

我的问题是 it completely breaks in firefox 当我添加模糊。我对 chrome 中的模糊没有任何问题，但由于某种原因，在 firefox 中，应该居中的背景图像会右对齐并被其自己的 div 裁剪，如果我在检查器中更改背景位置，它会移出错误区域.

这是 chrome 的屏幕截图，然后是我在 Firefox 中获得的内容。

除了放弃整个模糊的想法之外，我现在还不确定该怎么做。任何解决方案的想法都表示赞赏

【问题讨论】：

它不仅仅与背景位置有关，在结合 3D 和模糊时，它也适用于任何类型的图像！

您是否尝试从您的#blur div 中删除perspective 属性？

@makshh 我刚刚尝试从 Firefox 检查器中删除 perspective。有用。建议您添加答案并获得一些赏金。 PS转OP，效果不错。

我会等待 OP 的评论，因为也许他需要观点。

我想当检测到 firefox 时，当模糊应用 js 时，我必须从模糊中删除透视图。我确实需要不应用模糊时的透视图，但它足够微妙，不会显示太多。

【参考方案1】：

因此，在通过 javascript 更改父级过滤器模糊设置之前，我必须将旋转 X Y 和 Z 完全设置为 0（仅当检测到 Firefox 时）。 Here's 现在的样子。单击动画 GIf 进行模糊，然后单击任意位置以消除模糊。适用于 Chrome 和 Firefox！

它基本上是这样工作的：

var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
if(!isFirefox)
  3Danimation();

【讨论】：

您应该将代码添加到您的问题中，并在您的答案中修改代码以显示您所做的。 SO中的链接还不够