Prevent off-screen div from moving on resizing - css

Question

I have a drawer menu that appears on screen after clicking a button. The transition is a little laggy using absolute positioning so I went with using translate3d. The menu has two widths. One that's 100% of the view for mobile and 395px for viewports 600px and up. One quirk I'm noticing is that if I were to resize my screen, the menu will subtly appear. Is there a way to get the menu to completely stay off-screen when this happens?
Note: To see this, expand the snipped to full-screen and horizontally resize to 600px or lower. You should see see the div appear and go back off-screen.
$('button').on('click', function() {
$('#drawer').toggleClass('active');
});
html,
body {
height: 100%;
margin: 0;
}
#drawer {
width: 100%;
height: 100%;
background-color: grey;
transition: transform .5s ease-in;
transform: translate3d(-100%, 0, 0);
}
#drawer.active {
transform: translate3d(0, 0, 0);
}
#media (min-width: 600px) {
#drawer {
transform: translate3d(-395px, 0, 0);
width: 395px;
}
}
button {
position: absolute;
top: 10px;
left: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="drawer"></div>
<button>Toggle Drawer</button>

Answer 1

The problem: A transition is set on the drawer's transform property. When it hits the designated media query, the drawer transitions to it's new x coordinate.
The solution: Instead of putting the responsibility of placement solely on transform, use absolute positioning and initially offset the drawer to its' negative width. In this case it would be 395px. On the active state, the transform3d property would be the width of the drawer to bring it back into the visible part of the window.
$('button').on('click', function() {
$('#drawer').toggleClass('active');
});
html,
body {
height: 100%;
margin: 0;
}
#drawer {
width: 100%;
height: 100%;
position: absolute;
left: -100%;
background-color: grey;
transition: transform .5s ease-in;
transform: translate3d(0,0,0);
}
#drawer.active {
transform: translate3d(100%, 0, 0);
}
#media (min-width: 600px) {
#drawer {
left: -395px;
width: 395px;
}
#drawer.active {
transform: translate3d(395px, 0, 0);
}
}
button {
position: absolute;
top: 10px;
left: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="drawer"></div>
<button>Toggle Drawer</button>