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

Question

inb4:抱歉,超长的图片需要超长时间才能加载,如果您不想等待,请点击链接并阅读问题!

所以我正在创建一个网站的原型,我用它制作了一个虚假的3D效果,用鼠标移动了2d图像.当用户点击其中一个三角形以突出显示时,我想使用滤镜模糊.

我的问题是,当我添加模糊时,它在firefox中完全中断.我对chrome中的模糊没有任何问题,但由于某些原因在firefox中,应该居中的背景图像变为右对齐并由其自己的div裁剪,如果我在检查器中更改了背景位置,它会移出障碍区域.

这是Chrome的屏幕截图,然后是我在firefox中获得的内容.

在放弃整个模糊想法的同时,我并不完全不知道该做什么.任何解决方案的想法都是相关的

Answer 1

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

它基本上是这样工作的：

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