Android WebView scroll is not smooth and jumps / have pullbacks

Question

While testing my app on Pixel 3 and Android Pie, I found a weird scroll behavior with a Webview within my app, while scrolling down or up, the scroll is not smooth at all, and sometimes it jumps back to where it was or jumps completely to the top or bottom.

This happens when I swipe up or down (dragging and letting it go)

Here is a quick look of the problem (I was trying to scroll down): https://i.stack.imgur.com/MupYi.jpg

While scrolling down, it moved very slow, it moves so little, and then at the end the scroll jumps to the top a little bit itself.

This is an extended version, the jumps happens (randomly) when the scroll its about to stop and then jumps a little. https://i.stack.imgur.com/bY82h.jpg

I was testing my app with a LG phone and Huawei phone -real devices- (Marshmallow and Nougat), didn't have any problem in any of these devices.

On the emulator I tested a Nexus 5 with Android API 23 (M) and didn't have any problem. But changed the OS on the Nexus 5 to Android Oreo and found the scrolling issue there too.

I thought that the problem was Android Oreo+... but then I tested on the emulator Pixel 3 with Android 23 (M), and have the same scrolling issue. So maybe the device has something to do, but the Android version too.

I've tried to change the layer type like this:

webView.setLayerType(View.LAYER_TYPE_HARDWARE, null)

but doesn't have any effect. the "hardwareAccelerated" tag is true in the Manifest.

The setup of the webview is pretty simple:

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".destinations.common.WebViewDestFragment" android:id="@+id/root_layout">
    <WebView
            android:id="@+id/webView"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:overScrollMode="never"
            android:scrollbars="vertical"
            android:fadeScrollbars="false"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent">
    </WebView>
</androidx.constraintlayout.widget.ConstraintLayout>

The settings are also pretty basic:

webView.settings.javaScriptEnabled = true
webView.settings.domStorageEnabled = true
webView.settings.databaseEnabled = true
webView.settings.cacheMode = LOAD_CACHE_ELSE_NETWORK

Could this be a hardware or android API issue?

Answer 1

Try to change your layout like this

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".HomeActivity">

<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:overScrollMode="never"/>

</android.support.constraint.ConstraintLayout>

and add this in your java file

if (Build.VERSION.SDK_INT >= 21) {
        webview.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
    }

    //FOR WEBPAGE SLOW UI
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        webview.setLayerType(View.LAYER_TYPE_HARDWARE, null);
    } else {
        webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    }