Scrollbar appearing in Firefox during CSS animation

Question

I know that a lot of questions have already been asked about the scrollbars in Firefox, but I'm having an issue I can't find answered anywhere else. Basically I have a div that opens/slides right from the left hand side. Within this div are two child divs – a main menu at the top and a social media menu at the bottom. Both of these divs also have css animations applied to them that make them slide inwards/upwards from the outskirts of the parent div, whilst the parent itself is moving.

The position shift on the bottom inner-div is causing the parent div to have a scrollbar on the Y-axis as it moves/opens. I currently have this set to overflow:auto which works fine in all browsers but Firefox. Using overflow:hidden fixes this, but I can't use that because on my website some of the menu links have submenus, so I need the ability to scroll when these are open.

Here is a fiddle – open in Firefox and click the green button, then the problem will be apparent. Is there a fix / workaround for this?

https://jsfiddle.net/75dtb1zk/15/

后收到弹出窗口时

HTML     

    <div class="navbar">
        <span id="button-one"></span>
    </div>

    <div class="push-menu">
        <ul class="mobile-menu">
            <li>Link 1</li>
            <li>Link 2</li>
            <li>Link 3</li>
            <li>Link 4</li>
            <li>Link 5</li>
            <li>Link 6</li>
        </ul>
        <div class="social-menu"></div>
    </div>

</header>

<div class="content">


</div>

<footer class="footer">

</footer>

CSS

html {
    position: relative;
    height: 100%;
    background-color: pink;
}
body {
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    transition: all .6s cubic-bezier(.645, .045, .355, 1);
}
.header {
    position: fixed;
    z-index: 10;
    height: 70px;
    width: 100%;
    background-color: white;
}
.header .navbar {
    transition: all .6s cubic-bezier(.645, .045, .355, 1);
}
.open-left .header .navbar {
    transform: translate3d(295px, 0, 0);
}
.open-right .header .navbar {
transform: translate3d(-295px, 0, 0);
}
.content {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    transition: all .6s cubic-bezier(.645, .045, .355, 1);
    width: 85%;
    margin-top: 80px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
}
.open-left .content {
    transform: translate3d(295px, 0, 0);
}
.open-right .content {
    transform: translate3d(-295px, 0, 0);
}
.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    width: 100%;
    padding: 10px 0 10px 0;
    background-color: #efefef;
}


#button-one {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 20px;
    background-color: green;
    cursor: pointer;
}
.push-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: fixed;
    top: 0px;
    left: 0;
    width: 295px;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: wheat;
    overflow: auto;
    transition: all .6s cubic-bezier(.645, .045, .355, 1);
    transform: translate3d(-295px, 0px, 0px)
}
.open-left .push-menu {
    transform: translate3d(0px, 0px, 0px)
}
ul.mobile-menu {
    position: relative;
    left: -85px;
    width: auto;
    list-style: none;
    padding: 0;
    transition: all .6s cubic-bezier(.645, .045, .355, 1);
}
.open-left ul.mobile-menu {
    transform: translate3d(85px, 0px, 0px);
}
ul.mobile-menu li {
    padding-left: 50px;
    width: 50px;
}
.social-menu {
    position: relative;
    transform: translate3d(0px, 150px, 0px);
    width: 200px;
    height: 50px;
    background-color: red;
    margin: 0 auto;
    transition: all .6s cubic-bezier(.645, .045, .355, 1);
}
.open-left .social-menu {
    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');

        });

});