3

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.

Sébastien Gicquel
  • 4,227
  • 7
  • 54
  • 84
  • Try moving the scale from `#conteneur` to `#conteneur > div` – Adam Nov 20 '12 at 15:50
  • I'm not sure to understand. Can you be more specific ? But you're right, if i move -moz-transform to the body for example, the header is in fixed position. I'm not sure the zoom result is good on the body but it'a start. Also, you can post an answer and not a comment, so if the answer is good, i can vote for you. – Sébastien Gicquel Nov 20 '12 at 16:00

2 Answers2

4

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 > *

Community
  • 1
  • 1
Adam
  • 5,045
  • 1
  • 25
  • 31
  • Really interesting. I've never seen this kind of css code : #conteneur > * What does it mean ? Also, i've noticed that if i add a zoom button and if i modify the scale with jquery, the header is no more in fixed position. See this fiddle example : http://jsfiddle.net/Vinyl/cxT4m/ – Sébastien Gicquel Nov 20 '12 at 20:31
  • Perfect! Your solution is clear. I'll vote for your answer. If you want, you can also check this fiddle and see what i want to do : http://jsfiddle.net/Vinyl/RdYNt/ I've added a div and a button which is in absolute position and i still have an issue when the zoom button is clicked. Using scale with absolute and fixed position is not so easy. – Sébastien Gicquel Nov 22 '12 at 10:10
2

recently I found a comment which describes the same issue for containers with any transformation applied, meaning the transformation breaks the fixed effect. Here is an extract of the comment...

“Any value other than ‘none’ for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.” (http://www.w3.org/TR/css3-2d-transforms/)

See Fixed Positioning in Mobile Browsers

hennson
  • 741
  • 4
  • 7