CSS fixed positioning breaks in Chrome after -webkit-translate

Question

I'm creating a webpage based on responsive web design. So when it's resized to a smaller resolution, the navigation menu will be removed from the top bar and turn into an iPhone Facebook/Path style mobile sliding menu. I've achieved it using this library.

At the same time, I have a fixed positioning panel at the bottom, which can be pulled up and down, docked at the bottom of the page. It's very close to this, just that mine is at the bottom and can be pulled up.

Here is the issue in Chrome: When I slide out the mobile menu and slide back in (it's 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: Positions fixed doesn't work when using -webkit-transform (I haven't found any workaround for my problem in the answer though)

Thanks a lot!

Answer 1

You can follow this fiddle

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

It's really clean and simple. You can start following the same structure.

Note: the fixed element for some reason needs to have a z-index:

#topbar
    position: fixed
    z-index: 1