virtual scroll and ion-refresh together cause issues on UiWebView

[jgw96]

Ionic version: (check one with "x")
[ ] 1.x
[x ] 2.x

I'm submitting a ... (check one with "x")
[x ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

If you use virtual scroll and ion-refresh together on the same page it causes lag and makes it to where virtual scroll does not actually scroll reliably. For example, on a longer list you will sometimes have to swipe on the page multiple times before it actually scrolls. This only happens on UiWebView, on Android and WkWebView it works great. Preliminary debugging shows that this is probably because of us having to use JS scrolling on UiWebView. Also, virtualScroll by itself works great on UiWebView, this issue only happens when using an ion-refresh with virtualScroll.

Expected behavior:
VirtualScroll works great with ion-refresh

Steps to reproduce:

I have made this simple repo that illustrates the issue perfectly. Just pull down that repo and run it on an iOS device.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17-201612201942
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: macOS Sierra
Node Version: v6.9.1
Xcode version: Xcode 8.2 Build version 8C38

[ghenry22]

Can also be reproduced consistently in iOS emulator if that makes it easier than testing with a device

[ghenry22]

Just back to the office and immediately tested virtual scroll in my app with RC4 and with ion-refresher commented out. Scroll speed and acceleration is NICE! Everything seems to work great! @jgw96 thanks for logging this new issue, once this one is resolved I can close out my old issue for virtual-scroll + refresher.

As you have stated it seems that the refresher causes the performance issues with ui-webview, during my testing I added some logging into the refresher and into virtual-scroll and noticed that scrollTop is always 0 in the refresher when using js scrolling, it doesn't seem to listen for js scroll events and so never updates. I saw where the latest updates for virtual-scroll added js scroll event listening and handling so maybe something similar is required for the refresher component?

Hope this one gets into RC5, would mean I can push ahead with releasing the first beta of my ionic2 app to the store!!

If this is resolved in RC5 I will do a review on my virtual-scroll round up ticket and help to highlight issues that can be closed out and those that I can still reproduce.

[mtycholaz]

This also reproducible on Windows 10 mobile devices.

[ghenry22]

Another related issue I have just observed:

With a virtualscroll list if you scroll very slowly, low velocity, around 1 page at a time, scrollTop value reported by content will always be 0.

If you scroll with more velocity it will correctly report a positive value.

I think this is related as virtualScroll should correctly update scrollTop in order for refresher to know whether it is at the top of the list and should trigger or not.

[ghenry22]

@jgw96 So this was in RC5 milestone now it's in nothing?

[ghenry22]

@jgw96 - virtualscroll still cannot be used with refresher on iOS. This is a pretty big bug with 2 core ionic components. Could this please get sorted out? I would really like my users to be able to have the basic ability to refresh a list in a native-ish fashion.

[ghenry22]

@jgw96 Any update on this? We are now in v2.01 past final and the refresher component is unusably broken. I see pull requests for improved grids, new split view etc, but basic existing components still do not work.

Could someone PLEASE PLEASE fix refresher to work properly with virtual scroll!

Virtual scroll in segments and conditionals rather than a blank white screen would also be nice in a product that has gone final.

Don't get me wrong I love ionic and I think you guys do a great job, even got my first app build on ionic 2 live in the app stores! but this standard included components broken out of the box in a final release. That just needs a bit of love to polish them up to actually be in a final state.

[ghenry22]

@jgw96 Could this PLEASE get into an upcoming milestone. A basic ionic component that is just broken is so frustrating. I would really like to update my app with proper refresher functionality enabled again for iOS.

This works fine on Android and in the browser, it's just iOS that is super broken.

[ghenry22]

@manucorporat if you're looking into virtualscroll related issues could you check this out please? I'd really like to be able to use refresher with virtualscroll.

[muarifer]

Hello,

Is there any solution for this?

[ghenry22]

@jgw96 so this has been open for 6 months now and the issue is still present. Can someone please look at it?

[MarcWadai]

Having virtual scroll and ion-refresher on the same page is completly unsuable... We can only scroll on one direction otherwise it will trigger the refresher. Also the scroll accelerator is not working fine.
Is there a solution for this or workaround ?

[ghenry22]

@MarcWadai Unfortunately there has been 0 response from the ionic team on this one despite my repeated begging and efforts to provide as much information as possible to help ease troubleshooting time.

It is driving me slightly insane personally.

[MarcWadai]

@ghenry22 Thanks for your answer. Do you know if wkwebview will solve the problem for ios ? (trying to implement it but have some CORS trouble, another issue)

[ghenry22]

the ionic team have done some amazing work with the wkwebview plugin but it still has some serious functionality gaps to the UIwebview and it is treated very much as a "beta" product still with no proper tagged releases, milestones and sporadic effort as the team focus on other things.

Again I think what has been achieved towards making is usable is amazing but it still needs a bit more of a polish to make "use wkwebview" a viable answer.

I use wkwebview in my app primarily to work around a bunch of issues with virtual scroll as it was the only way I could release a usable app but then I have to work around certificate issues, cors issues, issues with background processing. The difference is I could solve these so I have an app that works.

if you have any users on ios8 though they will fall back to the uiwebview and have a horrible experience although that is becoming less of an issue as iOS users tend to update frequently.

All that said these features work completely fine on android and in a browser, it's just ios that needs a bit of attention.

[trebor678]

I'm having the same issue with iOS

[ctesene]

Any updates on this issue?

[fdambrosio]

there's the same problem with Ionic 3.7.1 on IOS

[ghenry22]

Yep it’s never been fixed since first reported

[lordgreg]

The same issue exists on Android devices and emulator (Genymotion)

[ghenry22]

This has only ever been a problem with uiwebview on iOS in my experience.

I still can’t reproduce it on android on a Samsung s7 or HTC one m8. With android v7 and v6 respectively.

What device and OS versions are you seeing the problem on?

[lordgreg]

Hm, that's strange. I'm testing this on

Samsung Galaxy S6 with Android 7.0.1 and
Emulator (Genymotion) of Google Pixel with Android 7.1.0.

Ionic CLI and angular-ionic with dependencies are on the latest stand.

[ghenry22]

Weird maybe it’s something in latest chrome update, I’ll update my Apps and uncomment the refresher code this week when I have time and test it out.

[fdambrosio]

I've tested now that using the new WKWebView there's no problem with virtual scrool and ion-refresh!
http://blog.ionic.io/wkwebview-for-all-a-new-webview-for-ionic/

[lordgreg]

Just that this only happens on Android which doesn't use WkWebView at all

[ghenry22]

Not just android it is still present in UIwebview, wkwebview still has one flaw that prevents me from using it, you can’t acces any of the persistent storage paths when the app is backgrounded. Once that is resolved then I won’t need uiwebview any more.

[fdambrosio]

Yes, you're right, on Android it's not working :-(

[radumironteodor]

Hi, any updates on this issue? I am trying to use ion refresher and virtual scroll, i managed to make it work on android, but on IOS i can only scroll down, when scrolling up the refresh event is triggered. Thanks.

[fdambrosio]

@radumironteodor any updates :-(

[ghenry22]

As this is uiwebview specific I doubt it will ever be fixed.

Try the new wkwebview plugin from ionic, it resolves most of the issues that stopped wkwebview from being viable when this issue was first reported

[ionitron-bot]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot]

Issue moved to: ionic-team/ionic-v3#156