Adding fixed position element breaks scrolling on Android 4.4 Nexus 4 Chrome Browser
Fixed position elements (elements with position:fixed css) have always been known to produce some quirks across different mobile browsers. Fortunately, newer mobile browsers are slowly resolving some quirks.
I had a strange quirk that prevented scrolling when you added an element with fixed positioning onto the page. In my case, I was adding a scroll-to-top button and fixing it to the bottom right using CSS. The CSS went something like this:
.scroll-btn {
position:fixed;
bottom: 30px;
right:15px;
background-color:rgba(0,0,0,0.4);
}
Whenever this button was added to the web app page I was working on, the page became stuck--- you weren't able to scroll at all. I found that this problem only existed when using Chrome browser on Android (4.4). I was using a Nexus 4 phone. I was not able to see this problem on iOS or other versions of Android, though the problem may exist elsewhere.
The problem? I had "overflow:hidden" on the body element in CSS like:
body {
overflow:hidden;
}
In some strange case, placing an element with position:fixed in a body with overflow:hidden prevented scrolling altogether. By removing overflow:hidden or changing it to overflow:scroll; this solved the issue I was having. Why I had it set, I can't really remember, it may have been an attempt to prevent a previous element from overflowing outside of the body (causing the page width to break out).
Hopefully if you've encountered this problem, this will help you out!