Ionic 3.6 - Scrolling does not update view

Ionic Framework ionic-v3
#1

Hello everyone,
Hopefully there is someone that can help me with this. Because it has been bugging me for a couple of weeks now.

I made this sort of timeline view that the user can scroll through. Both vertically and horizontally.
But when I run the app on android the view doesn’t always render correctly.

The z-index only works half the time and sometimes the labels on the left will be scrolled out of screen.
The labels on the left have an absolute position with z-index of 1. In the browser everything works correctly but it messes up on mobile.

Might be important: The view corrects itself when I tap once on the screen. (You can see it in the video, after a couple of seconds the view is correct. But that is because I tapped the screen)

I looked at the html with chrome dev tools through remote devices. And I noticed that the html does not change and the inspector is also showing the correct locations for all the elements. However, it does not show the correct view on mobile.

I tested on an Sony Xperia M2 with Android 5.1.1.
Here is my ionic info:

cli packages:

    @ionic/cli-utils  : 1.6.0
    ionic (Ionic CLI) : 3.6.0

global packages:

    Cordova CLI : 7.0.1

local packages:

    @ionic/app-scripts              : 1.3.12
    @ionic/cli-plugin-cordova       : 1.4.1
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Cordova Platforms               : android 6.2.3
    Ionic Framework                 : ionic-angular 3.5.0

System:

    Node : v6.11.0
    OS   : Windows 10
    npm  : 3.10.10

Is there anyone that has any clue what’s going on?
Please let me know if you need more information. I included a gif to give more context.

#2

Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Chrome dev tools: https://ionic.zone/debug/remote-debug-your-app#android Does the html really change when you tap the display again?

#3

What device are you testing on? Android version?
Also post your ionic info output please.

#4

Hey Sujan,
Thanks for taking the time to respond to my problem.

I looked at the html with chrome dev tools through remote devices. And I noticed that the html does not change and the inspector is also showing the correct locations for all the elements. However, it does not show the correct view on mobile.

I tested on an Sony Xperia M2 with Android 5.1.1.
Here is my ionic info:

cli packages:

    @ionic/cli-utils  : 1.6.0
    ionic (Ionic CLI) : 3.6.0

global packages:

    Cordova CLI : 7.0.1

local packages:

    @ionic/app-scripts              : 1.3.12
    @ionic/cli-plugin-cordova       : 1.4.1
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Cordova Platforms               : android 6.2.3
    Ionic Framework                 : ionic-angular 3.5.0

System:

    Node : v6.11.0
    OS   : Windows 10
    npm  : 3.10.10
#5

This indicates a rendering problem in the Webview…

Can you try with other devices (this one seems 3 years old) and (newer) Android versions to figure out if this is a general problem or only on that device?

1 Like
#6

Well… that seems to have done it. I updated my Android System WebView and it now works as intended!
Thank you very much for your help. :smiley:

1 Like