Error with footer in mobile Chrome. How to fix?

There is such code:

body {
 overflow: hidden;
}

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


Desktop everything works fine but in mobile browsers when best personal Finance down begins to disappear header the Chrome, and my footer begins to rise with headeron Chrome:
5e4bd1f7b7204615225230.png
(the background blue, the footer is black)

After complete disappearance header footer back into place. If you remove the "overflow: hidden;" footer behaves as it should, but scrolling starts to work with the stuttering and footer still vibrates when best personal Finance.

P. S. Why do I use overflow and scroll together: best personal Finance when the event fires the drag element of the site.

How to solve the problem?
April 7th 20 at 15:40
1 answer
April 7th 20 at 15:42
Solution
Try it
And nice link back to your tunnel.

Find more questions by tags CSSHTMLMobile developmentWeb Development