I am currently facing a challenge with a webpage that includes an html5 video and css3 animations. While the web page functions perfectly on an android device's browser, I am experiencing laggy, glitchy, and jumpy animations when using hardware acceleration. On the other hand, software layerType allows for smooth animations but unfortunately, the video does not play (only the audio works) due to lack of support.
In an attempt to resolve this issue, I have experimented with various solutions:
Implementing hardwareAccelerated in the manifest file
Using
web_view.setLayerType(View.LAYER_TYPE_HARDWARE, null)Using
web_view.setLayerType(View.LAYER_TYPE_SOFTWARE, null)Exploring CrossWalk XWalkView as an alternative solution
I have also referred to resources such as Android webview slow performance, Android webview slow, Android webview loading data performance very slow, and more for potential solutions.
Upon examining the cordova webView code, I attempted the following adjustments:
webView.setInitialScale(0)
webView.isVerticalScrollBarEnabled = false
// Enable Javascript
val settings = webView.settings
settings.javaScriptEnabled = true
settings.javaScriptCanOpenWindowsAutomatically = true
settings.layoutAlgorithm = WebSettings.LayoutAlgorithm.NORMAL
Specifically, the line below significantly improved the animation quality:
webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null)
However, based on insights from Android webview slow, it appears that html5 video playback may be compromised as a result.
Do you have any recommendations on how to enhance WebView performance while maintaining optimal functionality? The URL performs flawlessly on browsers, so the issue lies within the WebView configuration.