Fixed positioning not working in Firefox

问题

I have following HTML in my webpage where I want to keep the sidebar fixed on the left side.It works fine in the Chrome but Firfox isn't displaying the sidebar as fixed :

<div id="sidebar">
    <!-- Logo -->
        <div >
            <h1>Heading</h1>
        </div>
            <!-- Nav -->
                <nav id="nav">
                    <ul>
                        <li><a href="#target1" >About</a></li>
                        <li><a href="#target2" >Works</a></li>
                        <li><a href="#target3" >Our Team</a></li>
                        <li><a href="#target4" >Contact</a></li>

                    </ul>
                </nav>

</div>

the CSS for above code is :

#sidebar
{
    position: fixed;
    top: 0;
    padding: 3em 1.35em 1em 1.15em;
    height: 100%;
    width: 12em; 
    background: #364050 ;
    box-shadow: inset -0.1em 0em 0.35em 0em rgba(0,0,0,0.15);
}

please suggest me some solution so that the sidebar will remain fixed in Firefox.

DOWNVOTERS PLEASE COMMENT FIRST.

回答1:

Check your body css tags, the metas, and anything that could affect to that div. Maybe there is another css rule overwriting that 'position' Also, if you have css3 tags or errors in the body css, for example, transform: translate3d(0px, 0px, 0px); that could make fixed position break in Firefox.

回答2:

i think you should try to make some changes in you css try this css

#sidebar
{
    position: fixed;
    top: 0;
    padding: 10px;
    bottom:0;
    left:0;
    width:200px; 
    background: #364050 ;
    box-shadow: inset -0.1em 0em 0.35em 0em rgba(0,0,0,0.15);
}

i do not prefer to use em for element dimensions it should be in px you can use em foe font size etc.

回答3:

#sidebar
{
    position: fixed;
    top: 0;
    left:0;
    padding: 3em 1.35em 1em 1.15em;
    height: 100%;
    width: 12em; 
    background: #364050 ;
    box-shadow: inset -0.1em 0em 0.35em 0em rgba(0,0,0,0.15);
}

回答4:

If your problem is with filters (not transforms) causing problems then this will work.

I had a filter setup on the fixed elements parent but it changed with the width of the window. I noticed that as the window width crossed these @media (max-width...) boundaries the fixed position element would relocate to exactly the position it was supposed to be at regardless of what the filter had.

orginal code:

<style>
  .withFilter {
    filter: whatever;
  }
  #fixed {
    position: fixed;
    bottom: 0px;
    ....
  }
</style>
<body>
  <div id="a">
    <div id="fixed">
      at bottom
    </div>
  </div>
  <script>
    ... lots of stuff ...
      jQuery("#a").addClass('withFilter');
    ... lots of stuff ...
  </script>
</body>

working code:

.... same stuff ....
  <script>
    ... lots of stuff ...
      setTimeout(function() {
        jQuery("#a").addClass('withFilter');
      });
    ... lots of stuff ...
  </script>
</body>

just add in enough time for the fixed position to take hold and only after that apply the filter/transform....

回答5:

filter on the current element or any parent will cause position fixed break on Firefox. Remove it or find another way to not to use filter directly

来源：https://stackoverflow.com/questions/17741264/fixed-positioning-not-working-in-firefox

标签

css

firefox

positioning