[Android] HybridWebView briefly resizes to full screen when page is opened before snapping back to correct size

[malsabi]

Description

On Android, when navigating to a page that contains a WebView which is supposed to occupy part of the screen (for example, 50% height within a layout), the WebView initially resizes to take up the entire screen. After a moment, it snaps back down to the correct bounds.

This happens only on initial load/initialization of the WebView. Once it has been created and sized, navigation back and forth works correctly. The issue is not reproducible on iOS or Windows, only Android.

Please note: The HybridWebView gets more flicker and heavier when the page contains complex xaml, similar to my production app.

Untitled.video.-.Made.with.Clipchamp.mp4

Steps to Reproduce

No response

Link to public reproduction project repository

https://github.com/malsabi/HybridWebViewIssue

Version with bug

9.0.100 SR10

Is this a regression from previous behavior?

No, this is something new

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

No response

Did you find any workaround?

No workaround

Relevant log output

[TamilarasanSF4853]

This issue has been verified in Visual Studio Code 1.103.2 with MAUI versions 9.0.0 and 9.0.100. It can be reproduced on the Android platform.

[malsabi]

@jfversluis Hello Gerald Is it possible to have this included in the SR12 or SR13? hopefully before the end of this year.

[jfversluis]

This has just been reported, so we don't have a lot of data yet on people maybe experiencing this same behavior, but my gut feeling says that this is a bit of an edge case so it won't get a lot of priority. If you have a rush with this, you probably want to look into it yourself.

Or maybe you'll get lucky and @mattleibow has an idea.

[malsabi]

@jfversluis I found a solution or maybe it’s more of a workaround but I managed to patch it on my side by creating a custom handler.

There is two issues happening:

1. When the HybridWebView sets the Background property to any color other than Transparent. Even if you try hot-reload to change the color, it won’t work unless you restart the app to see the new color on the "popup." So make sure to set Background to Transparent color so that the "popup" has a transparent color when displayed.

2. It toggles full screen and then resizes to the correct size. This happens when the HybridWebView is running with hardware acceleration enabled. I had to disable hardware acceleration on the HybridWebView control only.

By combining the two solutions:

1. Disable hardware acceleration on HybridWebView
2. Set the Background property of the HybridWebView to Transparent

Result:
No more toggle, no popup will appear. Just the expected WebView rendering its content.

Code

The custom handler class:

public partial class CustomHybridWebViewHandler : HybridWebViewHandler
{
	protected override WebView CreatePlatformView()
	{
		var platformView = base.CreatePlatformView();
		platformView.SetLayerType(LayerType.Software, null);
		return platformView;
	}
}

Usage example in xaml:

 <HybridWebView Background="Transparent" DefaultFile="filetest.html" />

Registering the custom handler in MauiProgram.cs

#if ANDROID
		builder.ConfigureMauiHandlers(handlers =>
		{
			handlers.AddHandler<HybridWebView, CustomHybridWebViewHandler>();
		});
#endif

[malsabi]

I also found out a better solution, thanks to @albyrock87 that don't require Custom handler, by wrapping the HybridWebView into a Grid and set IsClippedToBounds to true. I think this issue can be closed.

[albyrock87]

I mean the bug is there so it's worth fixing it sooner or later :)

[OvrBtn]

Bumping this since I'm also experiencing this issue, on older/lower spec devices it can cover the screen for longer than just a brief moment or just cover it completely without going back to normal.

But the IsClippedToBounds seems to be working, thanks Alberto!