iOS Web Page Scrolling Issues

Question

Problem: I have developed a basic web site using GoDaddy's Website Builder V7. See it here --> oktoberfestvisits.com . It is not iPad aware or optimized in any way since I have very little control over HTML, etc that is generated. All the pages appear to display properly, however, I have two problems I do not understand.

1. When trying to scroll quickly, ie. swiping down or up, the page only scrolls about 5 or so lines at a time. Is there something in the page that controls or prevents smooth scrolling (Momentum Scrolling)? All other web sites and web pages scroll fine.

2. When in the middle of the page, touching on the black title bar at the top of the screen does not snap back to the top of the page. Like above, is there something that controls or prevents this? Like above, all other web sites and web pages work fine.

I can make some minor HTML additions if necessary, but I do not know what causes this. Is there something that needs to be on my pages so that the iPad scrolls smoothly?

Answer 1

.sc {
        -webkit-overflow-scrolling: touch;
    }

Add this css code to style sheet and then add "sc" class on the page which that scroll issue. Like if you put finger on <input /> field and quickly scroll, but it doesnt scroll then put sc class on input field or add to its parent element.

e.g.

<div class="sc">
   <div class="form-group sc">
         <input type="text" placeholder="First Name"/>
     </div>
     <div class="form-group sc">
         <input type="text" placeholder="Last Name"/>
     </div>
     <div class="form-group sc">
         <input type="text" placeholder="Email"/>
     </div>
     <div class="form-group sc">
         <input type="text" placeholder="Property Units"/>
     </div>
 </div>