CODEWITHSUNDEEP
iossmooth-scrolling
Keith Vozel
Keith Vozel

Reputation: 41

iOS Web Page Scrolling Issues

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?

Upvotes: 4

Views: 11832

Answers (3)

Mr. Hugo
Mr. Hugo

Reputation: 12592

It appears that iOS has laggy scroll when you use overflow: hidden or overflow-x: hidden. Try to avoid that.

Upvotes: 0

Aftab Ahmed
Aftab Ahmed

Reputation: 885

.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>

Upvotes: 5

Andreas Krischer
Andreas Krischer

Reputation: 144

The whole page is in a div with position: absolute;. I think this causes the scrolling error on iOS.

Upvotes: 0

Related Questions