OnsenUI + Android4.0-4.3でpushPage後の元ページが先頭へ移動する
Android4.0 ~ 4.3でons-pageをスクロールさせた後、pushPageで新しいページを追加すると、追加元ページのスクロールポジションが初期化されます(0になる)。
- エミューレータと実機の両方でこの現象が発生
- Android4.4以上やiOSでは、この現象が発生しない
- Android4.3においてはgulp serveで立ち上げたプロジェクトに標準ブラウザでアクセスした場合は問題ないが、PhoneGapにてapk化した場合は同現象が発生する
- ons-page内にons-lazy-repeatを利用してスクロールさせても初期化される
動作確認は
http://ja.onsen.io/project-templates/gen/onsenui-tab-bar.zip
のファイル内にあるindex.htmlを弄って確認しました。
ダウンロードした時のバージョンは1.3.8となります。
angular.module('app').controller('AppController', function ($scope) {
$scope.doSomething = function () {
// ons.notification.alert({ message: 'tapped' });
navHome.pushPage('test.html'); //変更
};
});
<ons-template id="home.html">
<!-- varを追加 -->
<ons-navigator var="navHome">
<ons-page>
<ons-toolbar>
<div class="left"><ons-toolbar-button ng-click="doSomething()"><ons-icon icon="ion-compose"></ons-icon></ons-toolbar-button></div>
<div class="center">Home</div>
<div class="right"></div>
</ons-toolbar>
<ons-list style="margin: -1px 0">
<!-- ng-repeatリストを大きく -->
<ons-list-item modifier="chevron" class="item" ng-repeat="i in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]" ng-click="doSomething()">
<ons-row>
<ons-col width="60px">
<div class="item-thum"></div>
</ons-col>
<ons-col>
<header>
<span class="item-title">Rorem Ipsum{{$index}}</span>
<span class="item-label">5h</span>
</header>
<p class="item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</ons-page>
</ons-navigator>
</ons-template>
<!-- 新しくテンプレート追加 -->
<ons-template id="test.html">
<ons-toolbar>
<div class="left">
<ons-back-button>戻る</ons-back-button>
</div>
<div class="center">test</div>
<div class="right"></div>
</ons-toolbar>
</ons-template>
PhoneGapにてapk化し、実機にて動作テストを行いました。
画面スクロールしてリストをクリックしsettings.htmlをpushPageした後、戻るボタンや戻るキーで戻ると、スクロールポジションが0になっています。
monaca.io + Monacaデバッガーでも同じことが確認できます。
monaca.ioでOnsen UI Tabbarプロジェクトを選んで新規作成し、page1.htmlを
<div style="text-align: center">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<ons-button
ng-click="myNavigator.pushPage('new_page.html')">
Push New Page
</ons-button>
と編集してスクロール縦幅を確保し、実機(今回テストしたのはAndroid4.1)からMonacaデバッガーで同じ現象が発生することを確認できました。
暫定的な対応として、ons-navigatorのprepushイベントでscrollTop値を取得。
postpopで値を書き戻すで元の場所を復元してます。
これはOnsenUIの不具合なのでしょうか。
それとも4.0~4.3のWebView側の問題だったりするのでしょうか。