css issue with "position: fixed" only in Firefox due to -moz-transform: scale(1);

I'm building a website and I want to have the header in fixed position.

I've already done that on several website but it doesn't work on firefox. It's ok with safari and Chrome.

Here is a live example (doesn't work only with firefox)

Here is a live example which works with firefox

The only difference is in css :

-moz-transform: scale(1); 
-moz-transform-origin: 0 0;

It seems that -moz-transform "removed" the fixed position.

Can you explain me why ?

I'm using -moz-transform: because my client want to have a zoom button. I've explained it's not a good thing but he still wants this functionality.

CSS code :

#conteneur
{
width: 960px;
position: relative;
margin: auto;
zoom: 100%;
-moz-transform: scale(1); 
-moz-transform-origin: 0 0;
}

#header
{
position:fixed;
top:0;
z-index:3;
width:960px;
height:81px;
background-color:#ccc;
padding-bottom:8px;
}

ps : You're welcome if you want to edit my post as english is not my 1st language.

Solution

Try moving the

-moz-transform: scale(1); 
-moz-transform-origin: 0 0;

part from #conteneur to #conteneur > div.

So instead of:

#conteneur {
    width: 960px;
    position: relative;
    margin: auto;
    zoom: 100%;
    -moz-transform: scale(1); 
    -moz-transform-origin: 0 0;
}

try

#conteneur {
    width: 960px;
    position: relative;
    margin: auto;
}

#conteneur > div {  
    zoom: 100%;
    -moz-transform: scale(1); 
    -moz-transform-origin: 0 0;
}

See this Fiddle for a 0.4 scale example: http://jsfiddle.net/XtsRH/2/

Update:

About the > (child) selector:

* is simply the universal selector, that matches the name of any element type.

I've forked your fiddle (modify scale with jQuery): http://jsfiddle.net/AgCSx/ . The jQuery selector is changed from #conteneur to #conteneur > *