Fixed fixed CSS positioning in Chrome after -webkit-translate

Question

I am creating a web page based on responsive web design. Therefore, when it changes to a lower resolution, the navigation menu will be removed from the top panel and will turn into the iPhone Facebook / Path mobile sliding menu. I achieved this using this library.

At the same time, I have a fixed positioning panel at the bottom, which can be pulled up and down by docking at the bottom of the page. It is very close to this , just mine is downstairs and can be stopped.

Here's the problem in Chrome: when I push the mobile menu and turn on again (using "-webkit-transform: translateX ()"), the fixed positioned panel breaks its position.

After a bit of research, it seems to be a bug in Chrome . However, is there a workaround?

Possible duplicate: Fixed positions do not work when using -webkit-transform (I did not find a workaround for my problem in the answer, though)

Thanks a lot!

Answer 1

You can follow this violin

http://jsfiddle.net/stefanoortisi/DvZn2/1/

It is really clean and simple. You can start with the same structure.

Note: a fixed element for some reason must have a z-index:

#topbar position: fixed z-index: 1