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

Eyde

It doesn't have to do with only the background position, it does this also with any type of images when combining 3D and blur! – Eyde

Did you try removing perspective property from your #blur div? – Erymanthus

@makshh I just tried removing perspective from within the Firefox inspector. It works. Recommend you add the answer and get yourself some bounty. PS to OP, nice effect. – Caber

I'll wait for OP comment, because maybe he needs perspective. – Erymanthus

I think I'll have to remove the perspective from blur when the blur is applied with js when firefox is detected. I do need the perspective for when the blur is not applied but it sublte enough for it to not show too much. – Eyde

When I view jaunemoutarde.ca/denique/bug_firefox/index.html on Chrome, it's blurry as well. Alternatively, this link jaunemoutarde.ca/denique/index.html is not blurry for me in Firefox (50.0.1) or Chrome (55.0.2883.87 (64-bit) – Hinshaw

Yes I blur on and off the effect depending on the situation. – Eyde

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();
}

Eyde

You should add the code into your question and modified code in your answer to show what you did. Links are not really enough in SO – Caber