bug: wkwebview bouncing issue on iOS 16

[rpanadero]

Bug Report

Capacitor Version

💊   Capacitor Doctor  💊 

Latest Dependencies:

  @capacitor/cli: 4.2.0
  @capacitor/core: 4.2.0
  @capacitor/android: 4.2.0
  @capacitor/ios: 4.2.0

Installed Dependencies:

  @capacitor/android: not installed
  @capacitor/core: 4.2.0
  @capacitor/ios: 4.2.0
  @capacitor/cli: 4.2.0

[success] iOS looking great! 👌

Platform(s)

• iOS

Current Behavior

The webview bounces when the user slides down the view. I have checked the webview config and bouncing effect is disabled, but it seems it doesn't work.

Only reproduced on a physical iOS device with iOS 16.

Expected Behavior

The webview shouldn't bounce when the user slides down the app view.

Code Reproduction

https://github.com/rpanadero/demo-bouncing

Only reproduced on a physical iOS device with iOS 16.

Other Technical Details

npm --version output: 8.19.1

node --version output: v18.9.0

pod --version output (iOS issues only): 1.11.3

Additional Context

This bug was already reported as an iOS 16 issue on Apple forum one month ago, but it seems not to be fixed yet. Maybe, Apple will fix it in some days or months.

https://developer.apple.com/forums/thread/711601

Until Apple fixes the issue, we suggest to apply the workaround commented in this thread because the change is centralized and can be easily reverted when Apple fixes the real issue, if Capacitor team desires. The workaround consist on setting 'alwaysBounceVertical' webview property to false. Also, we have tested that the bug is still present on iOS 16 final release and the workaround still works.

We think that this change should be applied on Capacitor core code because this behaviour is undesired for all Capacitor iOS apps. In fact, webview bouncing is already disabled here:

https://github.com/ionic-team/capacitor/blob/76f28e70a5c0a03e4c6b9a93a0c068666a2c38ff/ios/Capacitor/Capacitor/CAPBridgeViewController.swift

capacitor/ios/Capacitor/Capacitor/CAPBridgeViewController.swift

Line 286 in 76f28e7

aWebView.scrollView.bounces = false

[philmmoore]

+1 on this. Seeing the same thing in iOS16 on physical devices

[mcfarljw]

I am also able to reproduce this using iPhone 13/14 simulators running iOS 16.

[msoler95]

+1 here, any solution?

[mcfarljw]

@rpanadero did you find a way to override this without needing to edit the core Capacitor project?

[fabltd]

Any fix?

[fabltd]

There is some talk of a fix here for Cordova. Is this possible to port to Cap?

apache/cordova-ios#1244

[webuniverseio]

It looks like this fix helps with webview freezing for a bit if user tries to scroll (and continue trying to scroll) after bounce effect.

[jonesdhtx]

👀

[jonesdhtx]

Actually the following capacitor config fixed it for me...

ios: {
  scrollEnabled: false
}

[mcfarljw]

Actually the following capacitor config fixed it for me...

ios: {
  scrollEnabled: false
}

This will also prevent native webview scrolling entirely (see https://developer.apple.com/documentation/uikit/uiscrollview/1619395-isscrollenabled).

[24jr]

@mcfarljw that stopped the bounce but also my body isnt scrolling now. Not sure if need to somehow do some sort of nested internal scroll. I think this is what those docs indicate. I'll prob just not do that and deal with bounce for now...

[cironapo]

I have same problem. Any fix?

[Sharcoux]

The PR solving this is here. A quick merge would be very appreciated.

[BenRacicot]

I couldn't get any of the native code to work but the actual capacitor.config.ios values fixed this for me.

"ios": {
    "contentInset": "always", <-- the cause
}

[e-peeyush]

++++