I am building a Cordova project using the Ionic framework. The app basically is for viewing content. I am simply loading and appending html text to the page, and the user scrolls through it for reading. I have faced very strange behaviour; when there is a large amount of text and the user tries to scroll, the scroll does not work unless he scrolls over a background. If he happens to first tap on the text, the scroll won’t work. It must be on the white ‘invisible’ part of the content.
I have spent 2 days trying to debug this problem. It works in the desktop browser (when debugging) but not on the device, I am using a Galaxy s4 mini for testing. Can it be an issue specific to my device? Again, this only happens when there a lot of text on the page.
This is the code for the part containing the ion-content:
<ion-side-menu-content drag-content="false" ng-init="searchOb={enabled:false}">
<ion-header-bar class="bar-dark" ng-controller="ReaderCtrl" ng-init="init()"
ng-show="!searchOb.enabled">
<div class="buttons">
<button class="button ion-arrow-left-a" ng-if="config.mode!='bundle'"
ng-click="backClicked()"></button>
<div class="coverImgContainer thumbnail floatLeft"
style="width:30px; height:37px; margin-right:5px">
<img class="portrait" ng-src="{{data.epub.book|coverPath}}"/>
</div>
</div>
<button class="button icon-right ion-android-dropdown button-clear" ng-click="chapterClicked()">
{{data.book.chapter.title}}
</button>
<h1 class="title"></h1>
<div class="buttons">
<a ui class="button icon button-icon ion-search" ng-click="searchOb.enabled=true"></a>
<a ui class="button icon button-icon ion-android-drawer" ng-click="menuClicked()"></a>
</div>
</ion-header-bar>
<searchHeader searchid="searchOb" onsearch="searchContent(key)"></searchHeader>
<pageOptions ng-controller="PageOptionsCtrl" ng-init="init()"></pageOptions>
<ion-content ng-controller="ContentCtrl" class="contentContainer ebook-content has-header has-footer"
ng-init="init()"
on-release="mouseUp()" ng-mousemove="mouseMove()" on-scroll="scroll()"
on-swipe-right="onSwipeRight()" on-swipe-left="onSwipeLeft()" scroll="true"
delegate-handle="content" padding="true" autoscroll="false"
has-bouncing="true" id="epubContainer">
<div ng-bind-html="data.book.chapter.content"></div>
<ion-refresher ng-if="chapterIndex>0" pulling-text="Previous Chapter.."
on-refresh="refresher()"></ion-refresher>
</ion-content>
<nextChapterScroll></nextChapterScroll>
</ion-side-menu-content>