Ionic 3.6 - Scrolling does not update view

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.

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?

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

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

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

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