Ion-content scrolls up on orientation change (landscape -> portrait)


#1

We have an ion-list inside an ion-content.
Following are the steps to reproduce the issue:
. After launch, change the orientation to landscape.
. Scroll to bottom of the list
. change to portrait

The screen is pushed up by some margin and a white space is shown at the bottom, on touching the screen the list recovers and pushes the content to bottom of the screen.

Temporary fix: We are calling $ionicScrollDelegate.resize() on event ‘resize’, this pushes the screen back to bottom on changing the orientation from landscape to portrait in the above scenario.

We don’t see any reason for the resize() to be called on orientation change as we are not adding/deleting any item from the list.

Please help in understanding the reason for the issue and an appropriate fix for overcoming the issue.


#2

Hello,

I think that the problem is caused by the difference in the size of the container which contains the scroll in portrait or landscape. Or at least that is my problem. When you call resize(), the height of the container gets recalculated which forces the scroll to calculate its correct position.

However, I have another related problem. If you change the orientation, the scroll position is not retained. I have tried a solution in which on orientationchange I calculate the percentage of the screen until which I have scrolled using the maximum height of the container and the current position of the scroll top. Then, after I call resize(), I calculate again the percentage having the new scroll container size. Something like this:

   window.addEventListener('orientationchange', function () {
            var oldContainerSize = $ionicScrollDelegate.getScrollView().getScrollMax().top;
            
            $ionicScrollDelegate.resize().then(function () {
                var percent = $ionicScrollDelegate.getScrollPosition().top / (oldContainerSize);
                var newScrollPosition = $ionicScrollDelegate.getScrollView().getScrollMax().top * percent;
                $ionicScrollDelegate.scrollTo(0, newScrollPosition, false);
            });

        }, false);

And this works quite good if I have a list with similarly sized items. However if there is only text on the page, these calculations do not give me the right position of the scroll after the orientation has changed.

Do you have any idea how can I cope with this problem?


#3

Hello,

I can see that the scroll position is retained in my case on orientation change.
On my screen if there is a list 1-10 where 1 is at top. On orientation change the 1 remains at top but the screen height is reduced hence only may be 4 items 1-4 will be shown, which is a correct behaviour. Even if we scroll to show 4-14 items and then change orientation the item 4 sits at top and items 4-8 are shown.
This behaviour should be consistent for you also.
What do you mean by scroll position not retaining is the above behaviour not seen by you?


#4

No, since on a smaller screen in Portrait i have a card with a picture which is let`s say 320 px. When I change the orientation, however, the picture gets re-sized to 480 px width (if the device is 320x480) and correspondingly the height is bigger compared to the case with width 320 px. As long as I saw

$ionicScrollDelegate.getScrollPosition().top 

maintains the same value in either Portrait or Landscape. Thus since there is difference in the height of the elements in Portrait and Landscape, the scroll position is not correct after change of the orientation.

Are all of your elements in the list with consistent height when you change the orientation of the screen, or do they change their height when switching from portrait to landscape and vice versa?