OnsenUI+Android 4.0-4.3 moves the original page to the top after pushPage

After scrolling ons-page in Android 4.0-4.3, adding a new page in pushPage initializes the scroll position of the source page (0).

This symptom occurs on both the emulator and the actual machine
This symptom does not appear on Android 4.4 or later or iOS
With Android 4.3, there is no problem with accessing projects launched with gulp serve with a standard browser, but this issue occurs with apk on PhoneGap
Initialize when scrolling through ons-lazy-repeat within ons-page

Check operation
http://ja.onsen.io/project-templates/gen/onsenui-tab-bar.zip
I checked using index.html in the file.
The downloaded version is 1.3.8.

angular.module('app').controller('AppController', function($scope){
    $scope.doSomething=function(){
        // ons.notification.alert({message:'tapped'});
        navHome.pushPage('test.html'); // Change
    };
});

<ons-template id="home.html">
    <!--Add var-->
    <ons-navigator var="navHome"> 
        <ons-page>
            <ons-toolbar>
                <div class="left">ons-toolbar-buttonng-click="doSomething()">ons-icon icon="ion-compose"></ons-icon>>ons-toolbar-button;>>
                <div class="center">Home</div>
                <div class="right"></div>
            </ons-toolbar>

            <ons-list style="margin:-1px0">
                <!--- ng-repeat list large -->
                <ons-list-item modulator="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 sitamet, connectetur adipising elit, sed doiusmod tempor incident out labore et dolore magna aliqua.</p>
                        </ons-col>
                    </ons-row>
                </ons-list-item>
            </ons-list>
        </ons-page>
    </ons-navigator>
</ons-template>

<!--Add New Template-->
<ons-template id="test.html">
        <ons-toolbar>
        <div class="left">
            <ons-back-button>Back</ons-back-button>
        </div>
        <div class="center">test</div>
        <div class="right"></div>
    </ons-toolbar>
</ons-template>

It was apkized on PhoneGap and tested on the actual machine.

Scroll to the screen, click on the list, pushPage settings.html, and then use the Back button or the Back key to return to zero.

The same can be seen on the monaca.io+Monaca debugger.
Select the Onsen UI Tabbar project from monaca.io and create a new one, page1.html

<div style="text-align:center">
<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>

I was able to edit it to ensure the scroll length and confirm that the Monaca debugger is experiencing the same symptom from the actual machine (this time I tested Android 4.1).

Obtained scrollTop value for ons-navigator prepush event as an interim response.
Restoring the original location by rewriting the value in postpop.

Is this an OnsenUI bug?
Or is it a problem on the WebView side between 4.0 and 4.3?

monaca onsen-ui

2022-09-30 20:54

1 Answers

It seems to depend on the WebView version.

If WebView resets the scroll position by switching none/block of the display property, the post-pushPage position seems to be reset.
"I did ""display:none/block"" on ""pushPage/popPage"", so it fits perfectly in this case and was reset

http://jsfiddle.net/sammy/RubNy/

$(document).click(function(){
  $('div').toggle();
});

div{
  height —50px;
  overflow —auto;
  background:lightgrey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div>
  Top <br/>
  <br/>Lorem ipsum dolor sitamet, connectetur adjuncting elit, sed doiusmod tempor inciduntut labore et dolore magna aliqua.Utenim ad minimum veniam, quisnostrud excitation ulamco laboris nis aliquoquoquoquoquoquoquoquoquoquoquoquoquoquoquoquoquoquoquoquoquoquoquoquoquoquoquoquoquoquoquoquoquoquoquoquoqu
  irure color in repehenderit in violate velitess cillum dolore eu fuguiat nulla pariatur.Excepteur sint occaecat cupidat non-project, sunt in culpa qui officia deserunt molit anim id labelum.<br/>
  <br/> Bottom
</div>

We have verified that the scrolling position will be reset when the above URL is opened and tested on the terminal where the symptoms occur.

Are there not many people suffering from this case with OnsenUI + Android 4.0?
It may be difficult to notice because there are no symptoms above 4.4

Or is it special to scroll through the ons-page and pushPage the next page like I do?
List → I think it's a detailed flow.

Using ons-lazy-repeat to pushPage from there seems to be a behavior that cannot be used on some Android devices.
For example, if you scroll through 100 items and pushPage them back, you won't be able to use the position reset.

2022-09-30 20:54

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656