Background center with transform 3D and filter blur on Firefox

Question

inb4: Sorry for the horribly oversized images that takes super long to load, click on the links and read the question after if you dont like to wait!

So I'm making this prototype of a site where I make a fake 3D effect with 2d images moving with the mouse. I wanted to use the filter blur when the user click on one of the triangles to make a focus on a pop up.

My problem is that it completely breaks in firefox when I add the blur. I have no problem with the blur in chrome but for some reason in firefox, the background image that's supposed to be centered become right aligned and cropped by its own div and if I change in the inspector the background position it moves out of the buggy area.

here's a screen shot of chrome followed by what I get in firefox.

I'm not exactly shure what to do at this point beside giving up the whole blur idea. Any ideas of solutions are apreciated

Answer 1

So I've had to set completely to 0 the rotate X Y and Z before changing the parents filter blur settings via javascript (only when Firefox is detected). Here's what it looks like as of now. Click on the animated GIf to blur and then click anywhere to remove the blur. works both on Chrome and Firefox!

It basicaly works like this:

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