Background Center with 3D Conversion and Filter Blur in Firefox

Question

inb4: Sorry for the terribly oversized images that take a very long time to load, click on the links and read the question after you don't want to wait!

So, I am making this prototype site where I am making a fake 3D effect with moving 2d images with the mouse. I wanted to use a blur filter when a user clicks on one of the triangles to focus on the popup.

My problem is that it completely crashes on firefox when I add blur. I have no problem with blurring in chrome, but for some reason in firefox, the background image that needs to be centered is right-justified and cropped by its own div, and if I change the inspector to a position of the background that it leaves the buggy area,

here is a screenshot of chrome followed by what i get in firefox.

I do not quite understand what to do at this moment in order to abandon the idea of ​​blurring. Any solutions ideas are appreciated.

Answer 1

So, I had to completely set 0 to rotate XY and Z before changing the filter settings of the parents filter using javascript (only when Firefox is detected). Here's what it looks like at the moment. Click on the animated GIf to blur, and then click anywhere to remove the blur. works in both Chrome and Firefox!

It basically works as follows:

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