Transition does not animate in Firefox

HTML & CSS
1

Hi,

I have written some css transforms and transitions. It is working quite well in IE 11, Chrome, and Opera but the transition does not work in Firefox (version 31.0). Here is the link to fiddle.

Can someone please tell me what is wrong with the transition/transform code?

Ritesh

2

Remove the overflow:hidden from the body and it should work. You don’t really need overflow:hidden there as the other elements have overflow :hidden already

You do have a few typos in the code also (highlighted in bold).


#site-canvas {
	width: 100%;
	height: 100%;
	-o-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
[B] background-blue;
}[/B]
.show-nav #slide-overlay {
	overflow-x: hidden;
	overflow-y: auto;
[B]	;[/B]
	-webkit-transform: translate3d(-75%, 0, 0);
	-moz-transform: translate3d(-75%, 0, 0);
	-ms-transform: translate3d(-75%, 0, 0);
	-o-transform: translate3d(-75%, 0, 0);
	transform: translate3d(-75%, 0, 0);
}
3

Hello Paul,

Thank you for saving my neck again. Well, I am not very well versed in CSS. I have been writing CSS by learning from websites like Sitepoint. But I’d never catch the issues in CSS like you did. I thought there was some problem with transforms or transitions. And I changed everything I could in these properties. Then I gave up and posted here.
I still don’t understand how overflow:hidden in body would cause the problem. If could please explain this bit, I’d be grateful.

Sorry about typo. It is not there in live code.

Ritesh

4

Transforms take over control of the whole structure and you have to be careful with fixed positioning/overflow hidden and transforms as they don’t obey the normal rules and strange things can happen. In this case I think its just a bug in Firefox but all browsers do seem to handle transforms , position:fixed and overflow slightly differently. So whenever a transform/transition isn’t working as it should I look at these elements first as a suitable problem area.

The key to transforms is to get the thing working in its basic form before you enhance it with positioning and context and then at least you know it works first and can find the solution more easily.:slight_smile:

5

Thank you for the tip. I’ll certainly check overflows and position now when problem occurs. :slight_smile: