webkit glitch - position fixed when body has a left value set - behaviors vary

Question

I believe that when setting position:fixed on an item (say navbar) and body has position:relative; left:150px;, the item fixed has no idea what it it's supposed to do.

From my understanding, position:fixed was fixed based on the window. If that is true, then body with left shouldn't effect the position of the sticky menu.

A button triggers the push of body and a menu comes out from the left. When closed, the body slides back into place.

In Firefox, this works perfectly, as I have coded it.

In Chrome, the navbar moves to the right as intended, and the sticky menu moves with it, but when you close the push menu, the fixed navbar stays in place. Hovering over it can fix it sometimes, resizing window always fixes it. I tried adding a class to the code that forced it to the left. It generally speaking, kind of worked.

In Safari, as soon as you scroll with the push menu open, the navbar jumps back to the left wall and does NOT behave as expected.

Here is a JSFiddle demonstrating the issue.

Is there a way to push the page without effecting fixed elements?

What is required to resolve this issue?

Thank you.

Answer 1

ey,

change:

.cbp-spmenu-push {
    overflow-x: hidden;
    position: relative;
    left: 0;
}

to:

.cbp-spmenu-push {
    overflow-x: hidden;
    position: absolute;
    left: 0;
}