AMPEDUPDESIGNS

CONSULTING CONCEPTS PERSONAL

Adding fixed position element breaks scrolling on Android 4.4 Nexus 4 Chrome Browser

April 24th, 2014

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!