What would prevent vertical scrolling in Chrome, only on a Samsung phone on a mobile CSS site?

Question

I am getting reports from the client I am developing for that he cannot scroll vertically on his Samsung Galaxy S4 using Chrome. Only on this and other Samsung phones using Chrome. Other browsers on same device scroll fine. The only elements of my CSS and HTML that I believe could be causing this are as follows:

CSS:

::-webkit-scrollbar{width: 20px;}
::-webkit-scrollbar-thumb{background-color:rgb(255, 136, 0); border-radius: 0;}
::-webkit-scrollbar-thumb:hover{background-color:rgb(194, 103, 0);}
::-webkit-scrollbar-track{background-color:rgb(237, 237, 237);}

I am NOT using any overflow: auto; tags which I have been told are problematic with mobile viewing.

I have the included these meta tags in my header to prevent horizontal scrolling and get proper scaling for mobile:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />

The site I am working on is http://elementorangeband.com/home if anyone cares to try and replicate this issue.

Thanks in advance.

Answer 1

I am able to reproduce this in chrome by going into developer tools and toggling on the mobile emulator there which indicates that this is something wrong with the CSS or JS in the page. After looking at your media queries it looks like you are hiding the overflow for devices with widths < 480px.

Change this section of elementorange.css:

@media only screen and (max-device-width: 480px) {

body {
    width: 100%; 
    max-width: 480px; 
    font-size: 10px; 
    position: absolute; 
    margin: 0px;
    padding: 0px; 
    background-color: #000; 
    overflow: hidden; /* remove me!! */
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

to:

@media only screen and (max-device-width: 480px) {

body {
    width: 100%; 
    max-width: 480px; 
    font-size: 10px; 
    position: absolute; 
    margin: 0px;
    padding: 0px; 
    background-color: #000; 
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

This change fixed scrolling for me. Let us know if it is still a problem. I hope the dev tools come in handy with future testing for ya!