css - Firefox 上具有变换 3D 和滤镜模糊的背景中心

Question

inb4:抱歉，图片太大，加载时间超长，如果您不想等待，请单击链接并阅读问题!

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

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

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

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

Answer 1

因此，在通过 javascript 更改父过滤器模糊设置之前，我必须将旋转 X Y 和 Z 完全设置为 0(仅当检测到 Firefox 时)。 Here's现在看起来像什么。单击动画 GIf 进行模糊处理，然后单击任意位置以消除模糊处理。适用于 Chrome 和 Firefox!

它基本上是这样工作的:

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