When using a css3 transform()
, position: fixed
does not apply. I made a fully working jsFiddle showing the issue: http://jsfiddle.net/SR5ka/
First scroll down, notice the left-hand sidebar stays fixed. Now, click expand
, and scroll down, notice the left-hand sidebar is now not fixed.
Any idea if there is a native css fix for this?
You could use a work around like this one. It involves toggling a left value (via a class) for both the fixed element and the container.
With a small amount of vanilla JS to toggle it the class:
According to this answer: https://stackoverflow.com/a/15251226/125264 This issue can be fixed by adding dummy -webkit-transform to the element which needs to be fixed. Worked for me.
Edit 04.2016
Looks like does not work anymore.