css - Fixed positioning not working in Firefox -

i have following html in webpage want keep sidebar fixed on left side.it works fine in chrome firfox isn't displaying sidebar 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 above code :

---

#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 solution sidebar remain fixed in firefox.

downvoters please comment first.

check body css tags, metas, , affect div. maybe there css rule overwriting 'position' also, if have css3 tags or errors in body css, example, transform: translate3d(0px, 0px, 0px); make fixed position break in firefox.