bug: pull to refresh ios - content transforms which leaves blank space when scrolling

[felixpis]

Bug Report

Ionic version: [x] 4.x

Current behavior: Pull to refresh. When performing this in chrome/safari/android content receives overflow: hidden. But on iOS device it's possible to scroll content during refresh action. And then it looks very strange: Spinner disappears and just background left over the screen.

Expected behavior: I think in every device content should get overflow: hidden

Related code:

Looks like the problem in next method in line 656:

https://github.com/ionic-team/ionic/blob/3937101e5c2b181a6b7926eb8386c22b0f887716/core/src/components/refresher/refresher.tsx#L655-L669

But I don't understand what does it mean here, this nativeRefresher and why in this case overflow: hidden shouldn't be set on ion-content

[liamdebeasi]

Thanks for the issue. Ignore the "needs reproduction" message you received - I misread the post 😄. Is the bug you are reporting that users can scroll the content while the pull to refresh is active on iOS?

[felixpis]

Thanks for the issue. Ignore the "needs reproduction" message you received - I misread the post 😄. Is the bug you are reporting that users can scroll the content while the pull to refresh is active on iOS?

Exactly. And it happens because of the condition related to nativeRefresher. Perhaps there is a reason for that. But now it really looks like a bug :-)

[liamdebeasi]

Thanks for the follow up. This is to be expected. If you open the native Mail app on iOS, open an inbox, and pull to refresh, you can still scroll up and down while the app fetches new mail. I am going to close this as this is not a bug in Ionic Framework. Thanks!

[avidan-chen]

@liamdebeasi I'm afraid there was a misunderstanding with this issue.

The problem is not that the content can be scrolled while pull to refresh is active. The problem is that while pull to refresh is active, and scrolling is in progress, the UI doesn't look good because there's a rectangle overlaying the top of the content, instead of seeing the spinner itself.

Attached is a gif demonstrating the issue.

[liamdebeasi]

Thanks for the clarification. I will reopen this, but I am not sure how much we can do right now. The content is transformed to ensure that it does not cover the refresher when the scrolling snaps back. Removing that transform would cause other undesirable side effects.

[avidan-chen]

@liamdebeasi thanks.

Will it be possible show the refresher itself while scrolling? I understand the content is transformed, but within that empty area, can't you show the spinner?

[liamdebeasi]

Yeah that's one option we could do. It wouldn't follow the iOS spec, but it would at least appear less broken.

[Ssssk]

I met the same problem, which was caused on the ios device. Do you have a solution @felixpis @liamdebeasi

[Ssssk]

Is there a solution @avidan-chen @liamdebeasi @felixpis @aub

[liamdebeasi]

We will update this thread when there is a solution in place, thanks.