[Bug] Android WebView contentHeight wrong after XF update from 4.8.0.1687 to 5.0.0.1874

[anysomgorm]

Description

I have implemented a custom WebView that sets its own height to the height of the HTML content loaded, after the content has been rendered. I have implemented a custom renderer for Android like below:

When using this custom WebView in Xamarin.Forms 4.8.0.1687 it correctly sets the height of the WebView to the height of the rendered HTML content (in my case 2290). After updating Xamarin.Forms to 5.0.0.1874, the same code rendering the same HTML content measures the content to 13510.

Steps to Reproduce

1. Setup new project running Xamarin.Forms 4.8.0.1687
2. Implement a custom WebView and add an Android renderer implemented like the image above.
3. Add page that uses the WebView and renderes a piece of HTML content.
4. Run app and verify that the content measures itself correctly, and that the height of the WebView is set to match the height of the content.
5. Update Umbraco.Forms to 5.0.0.1874 in both the shared project and the Android project.
6. Run app again and see that the measurement is no longer correct.

Expected Behavior

The WebView should measure the height of the content to actually match the height of the content.

Actual Behavior

Measurement is completely off.

Basic Information

• Version with issue: Xamarin.Forms 5.0.0.1874, Android SDK 29
• Last known good version: Xamarin.Forms 4.8.0.1687, Android SDK 28

Environment

Show/Hide Visual Studio info

``` Microsoft Visual Studio Community 2019 Version 16.5.4 VisualStudio.16.Release/16.5.4+30011.22 Microsoft .NET Framework Version 4.8.03752 Installed Version: Community Visual C++ 2019 00435-60000-00000-AA760 Microsoft Visual C++ 2019 ASP.NET and Web Tools 2019 16.5.236.49856 ASP.NET and Web Tools 2019 ASP.NET Web Frameworks and Tools 2019 16.5.236.49856 For additional information, visit https://www.asp.net/ Azure App Service Tools v3.0.0 16.5.236.49856 Azure App Service Tools v3.0.0 Azure Functions and Web Jobs Tools 16.5.236.49856 Azure Functions and Web Jobs Tools C# Tools 3.5.0-beta4-20153-05+20b9af913f1b8ce0a62f72bea9e75e4aa3cf6b0e C# components used in the IDE. Depending on your project type and settings, a different version of the compiler may be used. Common Azure Tools 1.10 Provides common services for use by Azure Mobile Services and Microsoft Azure Tools. Extensibility Message Bus 1.2.0 (d16-2@8b56e20) Provides common messaging-based MEF services for loosely coupled Visual Studio extension components communication and integration. IntelliCode Extension 1.0 IntelliCode Visual Studio Extension Detailed Info Microsoft Azure Tools 2.9 Microsoft Azure Tools for Microsoft Visual Studio 2019 - v2.9.30207.1 Microsoft Continuous Delivery Tools for Visual Studio 0.4 Simplifying the configuration of Azure DevOps pipelines from within the Visual Studio IDE. Microsoft JVM Debugger 1.0 Provides support for connecting the Visual Studio debugger to JDWP compatible Java Virtual Machines Microsoft Library Manager 2.1.25+gdacdb9b7a1 Install client-side libraries easily to any web project Microsoft MI-Based Debugger 1.0 Provides support for connecting Visual Studio to MI compatible debuggers Microsoft Visual C++ Wizards 1.0 Microsoft Visual C++ Wizards Microsoft Visual Studio Tools for Containers 1.1 Develop, run, validate your ASP.NET Core applications in the target environment. F5 your application directly into a container with debugging, or CTRL + F5 to edit & refresh your app without having to rebuild the container. Microsoft Visual Studio VC Package 1.0 Microsoft Visual Studio VC Package Mono Debugging for Visual Studio 16.5.514 (c4f36a9) Support for debugging Mono processes with Visual Studio. NuGet Package Manager 5.5.0 NuGet Package Manager in Visual Studio. For more information about NuGet, visit https://docs.nuget.org/ ProjectServicesPackage Extension 1.0 ProjectServicesPackage Visual Studio Extension Detailed Info SQL Server Data Tools 16.0.62003.05170 Microsoft SQL Server Data Tools TypeScript Tools 16.0.20225.2001 TypeScript Tools for Microsoft Visual Studio Umbraco ModelsBuilder Custom Tool 1.0 Umbraco Visual Studio Custom Tool for generating strongly typed IPublishedContent models. Visual Basic Tools 3.5.0-beta4-20153-05+20b9af913f1b8ce0a62f72bea9e75e4aa3cf6b0e Visual Basic components used in the IDE. Depending on your project type and settings, a different version of the compiler may be used. Visual F# Tools 10.8.0.0 for F# 4.7 16.5.0-beta.20181.6+85af456066acd4e76d2bc7821b44a325e46f2fca Microsoft Visual F# Tools 10.8.0.0 for F# 4.7 Visual Studio Code Debug Adapter Host Package 1.0 Interop layer for hosting Visual Studio Code debug adapters in Visual Studio Visual Studio Container Tools Extensions (Preview) 1.0 View, manage, and diagnose containers within Visual Studio. Visual Studio Tools for Containers 1.0 Visual Studio Tools for Containers VisualStudio.DeviceLog 1.0 Information about my package VisualStudio.Foo 1.0 Information about my package VisualStudio.Mac 1.0 Mac Extension for Visual Studio Xamarin 16.5.000.533 (d16-5@9152e1b) Visual Studio extension to enable development for Xamarin.iOS and Xamarin.Android. Xamarin Designer 16.5.0.470 (remotes/origin/d16-5@681de3fd6) Visual Studio extension to enable Xamarin Designer tools in Visual Studio. Xamarin Templates 16.5.49 (0904f41) Templates for building iOS, Android, and Windows apps with Xamarin and Xamarin.Forms. Xamarin.Android SDK 10.2.0.100 (d16-5/988c811) Xamarin.Android Reference Assemblies and MSBuild support. Mono: c0c5c78 Java.Interop: xamarin/java.interop/d16-5@fc18c54 ProGuard: xamarin/proguard/master@905836d SQLite: xamarin/sqlite/3.28.0@46204c4 Xamarin.Android Tools: xamarin/xamarin-android-tools/d16-5@9f4ed4b Xamarin.iOS and Xamarin.Mac SDK 13.16.0.13 (b75deaf) Xamarin.iOS and Xamarin.Mac Reference Assemblies and MSBuild support. ```

[divyesh08]

Try this once: Embed your Webview inside scroll view in Xaml

[anysomgorm]

Hi @divyesh08 thank you for your suggestion. I have tried that but it doesn't work. But it would still not change that the height from the WebView is measured incorrectly.

[divyesh08]

@anysomgorm make this changes in your WebViewRenderer

protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.WebView> e)
{
    base.OnElementChanged(e);

    view = (CustomWebview)Element;
    if (view == null && Control == null) return;

    if (e.NewElement != null)
    {
        Control.Settings.JavaScriptEnabled = true;
        Control.Settings.JavaScriptCanOpenWindowsAutomatically = true;
        if (view.AllowZoomInOut)
        {
            Control.Settings.BuiltInZoomControls = true;
            Control.Settings.DisplayZoomControls = false;
        }
    }
}

[anysomgorm]

Hi again @divyesh08 sorry for the long wait, we are in the middle of launching our app. But I have had time to test your suggestion now, and it does not fix the issue unfortunately. The javascript executed in the webview still measures the height of the content incorrectly. I have also tested this on iOS, and it has the same issue, where it measures the height as much larger than it actually is.

[divyesh08]

@anysomgorm so have you got the work around or not? And another thing is now we have to use WKWebView because UIWebview is deprecated. Still you are using UIWebView? Hope your app launch have been awesome.

[anysomgorm]

@divyesh08 Yes I have tried the work around, but it has no effect. In the iOS implementation I am using the WkWebView. The issue persists on both Android and iOS.

The height returned here is off: `public override async void OnPageFinished(WebView view, string url) { try { if (_xwebView != null) { view.Settings.JavaScriptEnabled = true; _xwebView.HeightRequest = 0d; await Task.Delay(100); string result = await _xwebView.EvaluateJavaScriptAsync( @" (function(){ if(document && document.body) { return document.body.scrollHeight; } })() "); _xwebView.HeightRequest = Convert.ToDouble(result) // the result variable returned from JS is not the right height of the content; _xwebView.ContentLoadedChanged(); } } catch (Exception e) { // Exception here is caused by navigating away from the page after the Javascript evaluation has finished. // Just catch the exception and do nothing. }

            base.OnPageFinished(view, url);
        }`

[divyesh08]

Can you share sample code, or screen shot of a page where you are facing issue?

[PureWeen]

@anysomgorm can you attach a small repro of the issue please?

[anysomgorm]

I have added an example project here: https://github.com/anysomgorm/xamarin-webview-bug The repo contains two solutions that are exactly the same except for the version of Xamarin Forms.

The solution in the "WebViewBug" folder runs version 4.8.0.1687 and works as expected. The solution in the "WebViewBug" folder runs version 5.0.0.1874 and does NOT work as expected.

The app has a mainpage that renders a custom webview that sets its height to the height of the loaded content. The webview loaded is this issue https://github.com/xamarin/Xamarin.Forms/issues/13575 :)

I have added two screenshots of the results. Wierdly enough I actually experience something new here. That both versions measures the height of the web content to the same value, but the content is only partially visible on the 5.0.0.1874 version. What I initially experience was that the height measured in the 5.0.0.1874 version of XF was signigicantly larger (around 5-7 times larger) than the actual height of the loaded content. None the less, there still seems to be something weird going on here.

[rachelkang]

Hi, @anysomgorm - thanks for sharing the repro! I confirm I'm seeing weird behavior with the WebView content on XF 5.0

Although it appears to be fine on loading, scrolling the content reveals that the webView is partially obscured:

[rachelkang]

seems like this is also related to https://github.com/xamarin/Xamarin.Forms/issues/13110

[mubaarakhassan]

Experiencing the same issues with getting way bigger height than the actual content. After looking around it seems like the given the width of WKWebview ScrollView ContentSize is not correct, it is way too small in my case.

Found a nice post explaining the issue. https://stackoverflow.com/questions/62174376/xamarin-forms-strange-height-issue-with-my-responsive-webviews-on-ios