Best IT Recipes

Fixed positioning not working in Firefox

I have the following HTML on my webpage where I want to keep the sidebar on the left side. It works fine in Chrome, but Firfox does not display 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>


CSS for the code above:



 #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 offer me some solution so that the sidebar remains fixed in Firefox.

DOWNLOAD VIEW FIRST.

+6
css firefox positioning
Jul 19 '13 at 8:17
source share
5 answers

Check out the css, metas tags and anything that might affect this div. Perhaps there is another css rule rewriting this position, Also, if you have css3 tags or errors in body css, for example, transform: translate3d(0px, 0px, 0px); that could fix a fixed position in Firefox.

+7
Nov 27 '13 at 17:12
source share
— -

I think you should try to make some changes to 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 the sizes of elements that should be in px, you can use the font size of em foe, etc.

0
Jul 19 '13 at 8:26
source share
 #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); }
0
Jul 19 '13 at 8:27
source share

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

I had a filter setting on the parents of fixed elements, but it changed with the width of the window. I noticed that as the width of the window crossed these @media (max-width...) borders @media (max-width...) , the fixed position element would move exactly to the position it was supposed to be, regardless of what the filter had.

source:

 <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 enough time to fix a fixed position and only then apply a filter / transform ....

0
Sep 03 '15 at 18:06
source share

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

0
Jul 19 '19 at 9:05
source share


More articles:


All Articles