Fixed CSS Header - Transform Translate X

I'm trying to make the header mobile site%% on the screen.

However, I have a button in this fixed that opens the MENU to the right of the site, using header applied to transform: translateX(-15%) . When I'm at the top of the site it works perfectly.

Now if the site is not at the top, it is in the middle of the screen, for example, when you click the button, the MENU is shown, but the main disappears. And I found that it is because of header in transform: translate .

Is this a BUG ?

Do you have a hack to solve this?

CSS

main#main{
    transition: all 0.3s ease;
    background-color: #FFF;
    &.is-active{
        transform: translateX(-210px);
    }
}

header#header{
    position: fixed;
    width: 100%;
    background-color: #a7ddb3;
    border-bottom: 8px solid #01613c;
    height: 50px;
    top: 0;
    left: 0;
    z-index: 3;
}

JS

var clickDeviceEvent    = 'touchstart' in window ? 'touchstart' : 'mousedown';
var menuMobile          = $("main, .menu-language, body, .open-menu");
urlBase                 = $('body').data('base');

// Abrir Menu Mobile
$('.open-menu').on(clickDeviceEvent, function(e){
    e.preventDefault();

    menuMobile.toggleClass('is-active');
});