Firefox not animating translate on certain elements

HTML & CSS
1

Hi all,

NOTE: Make sure your browser is under 768px to see the mobile version on my example. Should look like attached.

screen.jpg656×700 213 KB

I have a site with a fixed mobile header and a fixed off canvas side elements on either side of the page.

When you click the hamburger icon or ‘sidecart’ link various classes are added to elements which push the elements using transform: translate3d() to move the elements. It works great in Chrome/IE10+.

However, in Firefox (version 32.0.3 on OSX 10.8.5) the left menu just doesn’t animate.

I’ve tried everything I know to try and fix it and I’m baffled. I hope someone can offer some insight!

http://mikeebee.com/staging/carter/site-issues/html/

Let me know if you need any more information.

Many thanks,
Mike

2

Hi Mike,

The problem in Firefox is the overflow:hidden on the body which kills the transition as it seems to more or less ignores anything outside the visible area as far as the transition is concerned.

You will have to remove this rule:

body.nav_is_open {
	overflow-y: hidden;
}

Or hide/reset it for moz with a hack.

3

Perfect! Thanks Paul.

Basically I need to stop scrolling on the content area, I guess I could add an overlay. Not been able to stop scrolling on mobile at all though!

Thanks again.