Transform: TranslateX Positive Value Causes Scroll Bug On Mobile Window Resize?

I have a website that I use for testing purposes. I am currently trying to create an off-canvas sidebar that, when toggled, performs a nice transition effect and pushes the other content away (out of view).

I have a layout that I'm happy with, but I can't wrap my head around why it isn't working. I can only see this bug occur when I have the 'left menu' push the content to the right (the menu slides in from the left, so I want the content to be pushed away to the right) and only on a mobile device. It also happens when I mirror the effect on the right menu.

Here you can see the bug: http://e-plumber.co.uk/scroll-bug.html

Here you can see the bug is not present: http://e-plumber.co.uk/no-scroll-bug.html

Line 31 (.left-menu-show .top-menu, .left-menu-show .main-content{transform: translateX(80%);}) is the only line that changes between both pages, all I'm changing is the translateX value from 80% to -80%.

Please tell me if there are any better, simpler ways of achieving this. Any help will be greatly appreciated!