Vertical Scroll Doesn't work on iOS but works good on Android

Questions
1

I have a cordova app developed with Framework7. Vertical Scrolling doesn’t work on any page!

The page structure is

<div class="page" data-name="new-contact">
   <div class="navbar">
      <div class="navbar-inner sliding">
         <div class="left"><a href="#" class="link back"><i class="icon ion-ios-arrow-back"></i></a></div>
         <div class="title">Contact</div>
      </div>
   </div>
   <div class="page-content story-content" id="add-contact-content">
      <div class="block">
         <form id="contact-form" class="form-ajax-submit" enctype="multipart/form-data">
            <h1>Contact</h1>
            <div class="light-input story-input-focus no-icon-input"><input type="text" maxlength="231" id="reason" name="reason" placeholder="Reason"></div>
            <textarea class="light-input story-input-focus story-description-input" id="description" name="description" placeholder="Description"></textarea>
            <div id="add-contact" class="link red-button">Submit</div>
         </form>
      </div>
   </div>
</div>

And the page-content class has content longer than the view port. I tried adding auto/scroll for overflow,overflow-x and overflow-y . But nothing did work.

It works perfectly in android and even in iOS, horizontal scrolling works and also in the left menu panel, vertical scrolling works!

2

that’s strange.

do you add some css to your class or id?
eg

.story-content {
  height: XXX
}
3

Thanks for the reply :slight_smile:
No I didn’t! Just using that class in js! And in all the pages I have this problem.

One weird thing I experienced when I was debugging was,

In debugging tools, when I disable the visibility:hidden from actions-backdrop class div, The page-content was scrollable but not clickable(maybe since the action-drop div has higher z index).

4

It was because I was using hammerjs for swipe gestures to the parent div! Finally fixed it! :’)