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
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.