Scroll position of ScrollView jumps to WebView when pressed

Bug description:
When pressing a WebView inside a scrollable ScrollView, the scroll position jumps down to the WebView.

To Reproduce:

Install React Native version 0.71.3 and React Native webview Version 11.25.0
Place webview inside ScrollView.

The first time you press, it will jump down slightly.

Expected behavior:
When clicking a WebView inside a ScrollView, it should not change the scroll position of the parent ScrollView.

Environment:

OS: Android
OS version: >11
react-native version: 0.71.3
react-native-webview version: 11.25.0

Same issue here

I have the same issue.
It was also reported here: #2360 #2057
I also reported this issue in another repo ( here: iou90/react-native-autoheight-webview#259 ) but it seems to be a problem with WebView

Bug description:
Content jumps to top on first time press/click

To Reproduce:

To test on real device

Open the screen
Press the webview content

Source (static HTML or url):
https://snack.expo.dev/@sanduluca/webview-content-jump-on-press

Scan qr code and open app on a real android device
Press any area below first white section
To reproduce start from 1

Expected behavior:
No jump when press webview content

Screenshots/Videos:

2023-06-13.14.12.57.mp4

Environment:

OS: Android
OS version: 12
react-native version: 0.71.7
react-native-webview version: ^12.0.2
react-native-autoheight-webview version: ^1.6.5

It looks like the auto-scrolling is a behavior of the React Native ScrollView.

The only thing I imagine could be done from the react-native-webview side would be to set focusable to false... but I think that only makes sense if your WebView content is completely noninteractive? If that is your scenario, you could try hacking/patching in that change to see if it helps.

It looks like the auto-scrolling is a behavior of the React Native ScrollView.

The only thing I imagine could be done from the react-native-webview side would be to set focusable to false... but I think that only makes sense if your WebView content is completely noninteractive? If that is your scenario, you could try hacking/patching in that change to see if it helps.

The focusable={false} on <WebView /> doesn't seem to help with content jump. Tried on the snack I provided above.

focusable={false} on doesn't seem to help with content jump

I'm not sure the focusable property is actually hooked up (in fact I wonder if it's a mistake that WebViewSharedProps extends ViewProps...). I think this would require changing the native Android code.

Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically

Sadly we are still searching for solutions

same issue here

Same issue here in IOS in version 13.6.2

Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically

We are still looking for solutions

This sadly still happens :/

This sadly still happen with me too :/

Still happening

This solution is for people who need 2 lines of code right now to provide a temporary but relatively stable fix for this issue without installing forks or diving in to native code.

This solution only works when there are no other focusable elements in your scrollview. This solution is particularly useful when users need to be fully able to focus and interact with various elements inside of the webview.

The solution relies on a ref to the ScrollView, a ref to the WebView and a boolean signifying whether the WebView content was loaded.

  // Prevent initial touch jumping ([REDACTED]-78)
  //#region Here be dragons. Thou art forewarned.
  useEffect(() => {
    webViewRef.current?.requestFocus();
    scrollViewRef.current?.scrollTo({ x: 0, y: 0, animated: false });
  }, [loaded]);
  //#endregion

Anyway, long story short; Focus the webview before the user does it, and reset the scroll position immediately after. The user shouldn't see this, but since the webview is now focused, the user can interact with it freely without messing up your scrollview. That is, until another element inside your scrollview needs to be focused, in which case this solution is not suitable.

I found a temporary, quick, and forceful way to solve the issue.

Add the following content to node_modules/android/src/main/java/com/reactnativecommunity/webview/RNCWebView.java:

    @Override
    public boolean requestFocus(int direction, Rect previouslyFocusedRect) {
        return false;
    }

However, this will cause input or textarea elements inside the WebView to lose the ability to focus and bring up the keyboard.

So, I forked a project:
https://github.com/ashlyWeiting/react-native-webview
You need to install my forked repo to use this solution:

yarn add https://github.com/ashlyWeiting/react-native-webview.git

You can modify it based on your needs to control whether the WebView can be focused or not.

Here’s an example:

const webViewScript = `
  (function() {
    const inputs = document.getElementsByTagName('input');
    const textareas = document.getElementsByTagName('textarea');
    const focusableElements = [...inputs, ...textareas];
    window.ReactNativeWebView.postMessage(focusableElements.length > 0 ? 'allow-focus' : 'disallow-focus');
  
    return true;
  })();
`;

const [focusEnabled, setFocusEnabled] = useState<boolean>(false);

const onMessage = (event: WebViewMessageEvent) => {
  const message = event.nativeEvent.data;
  if (message === 'allow-focus') {
    setFocusEnabled(true);
  } else if (message === 'disallow-focus') {
    setFocusEnabled(false);
  }
}

<WebView
  focusEnabled={focusEnabled}
  injectedJavaScript={webViewScript}
/>

If you only need a simple solution where nothing in the WebView can be focused, you can directly set focusEnabled to false:

<WebView
  focusEnabled={false}
/>

Although it’s not the best solution, I hope it helps those who urgently need to resolve this issue.

Here are some experiences from native Android developers. Unfortunately, the ScrollView component in React Native does not expose this property, so there isn't much we can do.😥

Due to focus issues, you only need to add one property to the child controls of ScrollView: android:descendantFocusability = "blocksDescendants"

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:descendantFocusability="blocksDescendants"
    android:orientation="vertical">

The API description is as follows: android:descendantFocusability

Defines the relationship between the ViewGroup and its descendants when looking for a View to take focus.

#3575 fixes the issue for us. This fork already includes the fix: https://github.com/birdofpreyru/react-native-webview

Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically

I made a patch based on https://github.com/birdofpreyru/react-native-webview
I did some fixes as the code android did not compile
Also I'm not sure everything is needed ...

react-native-webview+13.12.5.patch

This issue is happening again for me on Android 15. It looks fine for older Androids but as soon as I click to web view on Android 15 it scrolls to the top of the screen -> in a same way as described in the video above.

@kubmir

@kubmir I've just tested it for Android 15, on Emulator, using my fork of the library and its Example app (the WEBVIEWINSIDESCROLLVIEW test inside it) — I don't see the problem re-appearing.

Navigation Menu

Repository navigation

Scroll position of ScrollView jumps to WebView when pressed #3014

8 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Scroll position of ScrollView jumps to WebView when pressed #3014

Description

Activity

knakandakare commented on Jun 20, 2023

sanduluca commented on Jul 12, 2023

TheAlmightyBob commented on Jul 17, 2023

sanduluca commented on Jul 17, 2023

TheAlmightyBob commented on Jul 17, 2023

github-actions commented on Sep 16, 2023

steffenkleinle commented on Sep 18, 2023

huanguolin commented on Sep 27, 2023

sh-shamsan commented on Oct 18, 2023

github-actions commented on Dec 18, 2023

steffenkleinle commented on Dec 22, 2023

8 remaining items

steffenkleinle commented on May 1, 2024

lvmtam commented on May 16, 2024

KubilayMobile commented on Aug 21, 2024

samuel-apps commented on Sep 12, 2024

ashlyWeiting commented on Sep 13, 2024

duck123ducker commented on Sep 27, 2024

steffenkleinle commented on Oct 5, 2024

github-actions commented on Dec 5, 2024

cguino commented on Dec 16, 2024

kubmir commented on Jan 16, 2025

birdofpreyru commented on Jan 21, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions