High CPU and GPU usage with simple CSS animations in WebView for .NET Android app - Stack Overflow

admin2025-04-28  4

I'm developing an Android app using ".NET for Android," and my UI is implemented with a WebView displaying a simple CSS animation. However, I'm experiencing high CPU (20%) and GPU (13%) usage even with trivial animations.

With Animation

Without Animation

Here are the details and the code I'm using:

MainActivity.cs

using Android.Webkit;
namespace AndroidApp3;

[Activity(Label = "@string/app_name", MainLauncher = true)]
public class MainActivity : Activity
{
    private WebView? WebView { get; set; }
    protected override void OnCreate(Bundle? savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
        
        WebView = new WebView(this);
        WebView.LoadUrl("file:///android_asset/index.html");
        SetContentView(WebView);
    }
}

index.html

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <style>
        .flasher {
            animation: pulseOpacity 1s infinite;
        }
        @keyframes pulseOpacity {
            0% {opacity: 0.90;}
            50% {opacity: 0.4;}
            100% {opacity: 0.90;}
        }
    </style>
</head>
<body>
    <h1 class="flasher" style="color:blue;">Test</h1>
</body>
</html>

Observations:

  1. The issue is present not only with my custom animations but also with Vuetify's built-in animations like loaders.
  2. When I open the same HTML page in Chrome on the same phone, the CPU and GPU usage are normal.
  3. The problem persists even after toggling hardware acceleration and setting the layer type to LayerType.Hardware.

Steps Taken:

  1. Enabled hardware acceleration in the AndroidManifest.xml.
  2. Tried setting WebView.SetLayerType(LayerType.Software, null);
  3. WebView version is 131.0.6778.200

Question:

How can I reduce the CPU and GPU usage caused by simple CSS animations in my WebView? Are there specific settings or optimizations for WebView that I might be missing? Any advice or suggestions for improving performance would be greatly appreciated.

转载请注明原文地址:http://anycun.com/QandA/1745781994a91216.html