Parallax Header Directive Bugs


#1

Hi, I have used this https://www.joshmorony.com/high-performance-parallax-animation-in-ionic-2/ directive in my project. However it does not work properly on the device. Please check out the video. As you can notice there are several bugs. I really appreciate any hint for fixing these bugs.

[ionic info]
Your system information:
Cordova CLI: 6.2.0
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.8.6
ios-sim version: 5.0.6
OS: OS X El Capitan
Node Version: v7.4.0
Xcode version: Xcode 8.2.1 Build version 8C1002

[Device]
Apple Iphone 6s, ios 10.2


#2

I’ve seen this - I think the issue is that with the use of domWrite(), which organises DOM updates so that they work more efficiently and don’t clash with what Ionic doing (which is important for performance), the code to update the parallax image doesn’t execute until the momentum for the scroll settles - so if you scroll up quickly it waits until the scroll settles before performing the update.

I haven’t had time to look to deeply into this yet, so I’m not sure what the solution is. You could of course not use domWrite, maybe try implementing something with requestAnimationFrame instead (which the original version used), but that will decrease the overall performance.


#3

I have also implemented with requestAnimationFrame but problems remain same.


#4

@ihuseynoff Use the driftyco wkwebview plugin for iOS as javascript rendering is delayed while scrolling in the default iOS webview.


#5

@evandillion I tried this too, makes no difference.


#6

I resolved the issues I was having on iOS by putting the code where I grab the clientHeight in ngAfterViewInit instead of ngOnInit