overflow:hidden not working on various mobile apps - html

Question

I'm working on a website and I've just noticed that the body doesn't seem to accept overflow:hidden on the Google Chrome app on my Samsung phone. I used to have an iPhone and I didn't experience this problem with the Chrome iOS app, but I've noticed that this code is sketchy at best – I also had a difficult time getting it to work on Safari desktop browser. I've tried using a wrapper around my content and this hasn't made any difference.
What happens is that when the user opens the push menu using the button on the left of the header, the viewport seems to expand, so the header extends in order to fill it, making the logo and the other button slide to the right. You're then able to scroll right and zoom out further, making everything smaller and breaking my meta viewport tag, which I obviously want to avoid. I've tried using touch-action: pan-x; which stops the user scrolling right, but doesn't actually solve the issue of the viewport expanding and taking the header with it.
Adding overflow-x:hidden to the html tag solves this problem on mobile, but that in turn breaks the overflow:hidden I've added to the body and allows users to scroll up and down on the desktop version when the menu is open.
I've created a jsFiddle below, but I've been unable to recreate this problem. I've left the relevant code from my site below along with a link to a page in which the problem occurs. I've also left a link to another website with a structure that I've imitated on my own site. They seem to have been able to make it work, and yet I've copied the code they're using on their html and body but it behaves very differently on mine.
Could anybody tell me if I've missed something, or how they're managing to do this and I can't on mine?
My website – http://www.lucieaverillphotography.co.uk/product-category/prints/
Other website where this seems to work – https://www.etq-amsterdam.com/about/
jsFiddle
https://jsfiddle.net/75dtb1zk/40/
HTML
<header class="header">
<span id="button-one"></span>
<span id="button-two"></span>
<div class="overlay"></div>
</header>
<div class="push-menu-one"></div>
<div class="push-menu-two"></div>
<div class="content">
</div>
<footer class="footer">
</footer>
CSS
/* MAIN SITE STRUCTURE */
html {
position:relative;
height:100%;
background-color:pink;
}
body {
width:100%;
min-height:100%;
margin:0;
padding:0;
overflow-x:hidden;
display:flex;
flex-direction: column;
}
.header {
position:fixed;
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
height:55px;
z-index:10;
background-color:#fff;
transition: all .6s cubic-bezier(.645,.045,.355,1);
}
.content {
flex: 1;
width:85%;
margin-top:80px;
margin-left:auto;
margin-right:auto;
padding-top:20px;
transition: all .6s cubic-bezier(.645,.045,.355,1);
}
.footer {
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
flex-direction: column;
align-items: center;
height: auto;
width: 100%;
padding: 10px 0 10px 0;
background-color: #efefef;
transition: all .6s cubic-bezier(.645,.045,.355,1);
}
/* PUSH MENUS */
#button-one {
display:inline-block;
width:30px;
height:30px;
margin:20px;
background-color:green;
cursor:pointer;
}
#button-two {
display:inline-block;
float:right;
width:30px;
height:30px;
margin:20px;
background-color:orange;
cursor:pointer;
}
.push-menu-one {
position:fixed;
top:0px;
left:0;
width:295px;
height:100%;
margin:0;
padding:0;
background-color:purple;
transition: all .6s cubic-bezier(.645,.045,.355,1);
transform:translate3d(-295px,0px,0px)
}
.push-menu-two {
position:fixed;
top:0px;
right:0;
width:295px;
height:100%;
margin:0;
padding:0;
background-color:purple;
transition: all .6s cubic-bezier(.645,.045,.355,1);
transform:translate3d(295px,0px,0px)
}
.overlay {
position:fixed;
z-index:9;
top:0px;
left:0px;
width:100%;
height:100%;
pointer-events:none;
background-color:#000000;
opacity:0;
transition: opacity 1s, width 0s ease 1s, height 0s ease 1s;
}
/* TOGGLE CLASSES */
body.open-left,
body.open-right {
overflow:hidden;
}
body.open-left .header,
body.open-left .content,
body.open-left .footer {
transform:translate3d(295px,0px,0px)
}
body.open-right .header,
body.open-right .content,
body.open-right .footer {
transform:translate3d(-295px,0px,0px)
}
body.open-left .overlay,
body.open-right .overlay {
width:100%;
height:100%;
opacity:0.4;
pointer-events:auto;
}
body.open-left .push-menu-one {
transform:translate3d(0px,0px,0px)
}
body.open-right .push-menu-two {
transform:translate3d(0px,0px,0px)
}
jQuery
jQuery(document).ready(function($) {
$('#button-one').click(function() {
$('body').toggleClass('open-left');
});
$('#button-two').click(function() {
$('body').toggleClass('open-right');
});
$('.overlay').click(function() {
$('body').removeClass('open-left');
$('body').removeClass('open-right');
});
});