Footer bug in mobile Chrome. How to fix?

Question

css

There is this code:

body {
    overflow: hidden;
}

.footer {
    position: fixed;
    display: block;
    width: 100%;
    left: 0;
    right: auto;
    top: auto;
    bottom: 0;
    background: black;
    height: 200px
}

Everything works fine on desktop, but in mobile browsers, when scrolling down, the header of Chrome itself starts to disappear, and my footer starts to rise along with the Chrome header:

(background - blue, footer - black)

After the header completely disappears, the footer falls into place. If you remove "overflow: hidden;" the footer starts to behave as it should, but the scroll starts to work with slowdown and the footer still vibrates when scrolling.

PS Why do I use overflow and scroll together: when scrolling, the drag and drop event of the site element is fired.

How to solve the problem?

Answer 1

Try this
. And in a good way, give a link to your tunnel.