How do I correct fixed positioning for a sidebar in Firefox?

Question

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.

Solution 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.

Solution 2

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