Fix: [Capacitor] Set overscroll background color from theme

[msdewitt]

Issue 1700

I added a way to eliminate the ios bounce outside the boundary of the app while adding a scroll feature within the controllable range of the app code instead of the device.

[msdewitt]

@raineorshine The difference in puppeteer tests on this pr is caused by turning off the bounce feature of ios and taking inspiration from @ankitkarna99's proposed solution in the issue: Issue 1700.

Originally, it is suggested to set scroll to false, but this caused issues with the webView. Instead, I opted for a solution similar to this, disabling the scroll bounce within the ios webview and setting the scrolling power to within our app itself.

We cannot set the background color dynamically on the ios webview as we do with javascript when a user changes themes, so we have to opt for a solution like this which either hides or limits the user from seeing the webview background behind the app.

With these changes, there is a drawback. By disabling the scroll bounce, it disables the scroll refresh feature which naturally comes with the Ios Webview.

@raineorshine please tell me your thoughts on this issue based on this information.

[raineorshine]

Thanks for the update! This looks like a promising approach. The overscroll background color now correctly matches the theme background color based on my testing.

We cannot set the background color dynamically on the ios webview as we do with javascript when a user changes themes, so we have to opt for a solution like this which either hides or limits the user from seeing the webview background behind the app.

Got it. That makes sense, and good to know the limitations with the WebView.

With these changes, there is a drawback. By disabling the scroll bounce, it disables the scroll refresh feature which naturally comes with the Ios Webview.

That's fine, we don't use that feature.

---

The only issue I am seeing is that programmatic scroll functionality is broken. Here are some examples, although there are likely others if window.scrollTo is not working everywhere.

• Scroll zone parallax - When the user scrolls, the scroll zone on the right should scroll independently, at a reduced rate.
• scrollCursorIntoView - When the cursor moves to a thought that is outside the viewport, it should automatically scroll to the thought. To reproduce, activate New Subthought on a thought with a long list of children that exceeds the height of the viewport. It should scroll down to the new thought.
• etc

[msdewitt]

It looks like it's working.

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-11-18.at.13.10.11.mp4

[raineorshine]

It looks like it's working.

Hmmm sorry about that! Maybe my branch was not up-to-date, or I failed to build the Capacitor app correctly. I do see now that the parallax scrolling and scrollCursorIntoVIew are working as expected.

Now what I'm seeing in the XCode simulator is that scroll bounce on overscroll is disabled completely. The scroll stops when it reaches the top. Just to confirm, is that what you have as well?

[msdewitt]

@raineorshine Are you talking about where you are scroll to the very bottom and create a new sub-thought?

Like this:

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-11-18.at.13.52.54.mp4

I also thought this was not expected, but when I double-checked if the same behavior happens on main I found that it's exactly the same as my branch.

[raineorshine]

I'm referring to the "scroll bounce" or "elastic scroll" behavior that occurs when scrolling past the top of the document.

Here is the behavior on main on iOS PWA:

trim.2994A651-A7B9-4032-900E-6FF8C26DC760.MOV

[msdewitt]

@raineorshine yes, that scroll bounce is actually a part of the UIScrollView of the IOS device. It is disabled in IOS in order to prevent the overscroll background from being shown since we can't dynamically alter the color of that (Its not javascript.)

This is only an issue with IOS devices so this fix is here.

Here is a video of the scroll bounce enabled and the UIScrollView background color set to white for visibility:

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-11-18.at.14.10.38.mp4

[raineorshine]

I see, thanks. Unfortunately we can't disable the scroll bounce. I've tried it both ways, and it feels really unnatural without it.

I'm open to other ideas, though I realize we are somewhat limited given the behavior of the WebView!

Maybe it's possible to add scroll bounce to a container within the body.

[msdewitt]

@raineorshine I think that's possible. However, I'm not as familiar with adding animation and transformations with React as I am with Angular.

I don't think I can complete this ticket since we can't remove the scroll bounce.

Do you want to reopen a new ticket to add a scroll bounce to the native JavaScript?

[raineorshine]

@raineorshine I think that's possible. However, I'm not as familiar with adding animation and transformations with React as I am with Angular.

When you say animations and transformations, do you mean the native scroll bounce or a Javascript emulation? Because the Javascript emulations I've seen are never quite performant enough to mimic native functionality.

I don't think I can complete this ticket since we can't remove the scroll bounce.

Are you wanting me to remove it from the milestone?

Do you want to reopen a new ticket to add a scroll bounce to the native JavaScript?

Let's keep the original issue so the full history is there. Changing the way the scroll bounce works is not so much a separate issue as a part of fixing the overscroll background behavior without breaking the existing functionality.

[msdewitt]

@raineorshine I mean the javascript emulation. It looks needlessly complicated to implement and might interact weirdly with the UIScrollView of IOS.

The problem with adding the javascript bounce is that it will affect all previous app versions on safari, web, android, and Ios. Where as right now, this is just an IOS issue.

In fact, by disabling the scroll bounce on IOS it is made consistent with all the other versions of the app. There is no scroll bounce similar on web right now and this would be adding a new change across the app.

[raineorshine]

@raineorshine I mean the javascript emulation. It looks needlessly complicated to implement and might interact weirdly with the UIScrollView of IOS.

I've looked at all the Javascript emulations that exist for scroll bounce and unfortunately none of them perform well enough to replace the native scroll bounce. We're going to have to stick to native browser scroll bounce. Since this appears to not be possible on the WebView without losing control of the overscroll background, then it should be on an element in the DOM. I think we should explore this latter possibility.

In fact, by disabling the scroll bounce on IOS it is made consistent with all the other versions of the app. There is no scroll bounce similar on web right now and this would be adding a new change across the app.

Not true. We currently have scroll bounce in Chrome, Safari, and Mobile Safari PWA, which is how I use the app personally on a daily basis. em has always had scroll bounce, at least on Apple devices.