Chromium

[Empty comment from Monorail migration]

@Reporter: Could you please provide a manual repro steps/sample file/URL and Application name that reproduces the issue which will help us in triaging.
Requesting you to provide a screencast of the issue which will help us in better understanding.

Thanks!!


[Monorail components: Mobile>WebView]

Sure, they are here also:

https://stackoverflow.com/a/68409038/1928691

I'm creating an app that is getting a dynamic HTML website from an API. Sometimes, the API can return a simple text like this:

<p>Lorem ipsum dolor sit amet consectetur adipiscing elit, malesuada per consequat conubia accumsan vulputate tincidunt, porttitor cum cras pretium diam inceptos. Augue fringilla id laoreet metus quisque eu accumsan ultrices fusce, vel hendrerit phasellus mollis arcu consequat risus suscipit, nostra orci lobortis at quis sed integer cubilia. Quisque turpis congue euismod class tristique magna at eros aenean quam, cum facilisis malesuada per auctor cubilia leo ultrices pharetra, praesent habitant ut nec feugiat velit pulvinar libero tellus.</p>
But sometimes, it can return an extremely complex one with images, tables, minor formatting, etc. I can add that the HTML that I get doesn't have any style or JS, it is just pure HTML.

I tried to set the WebView height as wrap_content and as a workaround, I hide it before loading, reload it after I execute it, and display it again after the content was loaded but nothing worked properly:

XML:

<?xml version="1.0" encoding="UTF-8" ?>
<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">
    <LinearLayout
        android:id="@+id/llOverview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="@dimen/min_val"
        android:orientation="vertical">
        <ProgressBar
            android:id="@+id/indeterminateBar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:indeterminate="true"
            android:max="100"
            android:layout_height="wrap_content" />
        <TextView
            android:layout_marginTop="@dimen/min_half_val"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="@dimen/text_size"
            android:id="@+id/lblDescription" />
        <android.webkit.WebView
            android:id="@+id/webViewExtra"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </LinearLayout>
</ScrollView>
C#:


var lblDescription = FindViewById<TextView>(Resource.Id.lblDescription);

lblDescription.Text = @"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Potenti nullam ac tortor vitae purus faucibus ornare. Tellus elementum sagittis vitae et leo duis. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Elementum curabitur vitae nunc sed velit dignissim sodales ut. Vitae aliquet nec ullamcorper sit amet risus nullam eget. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula. Quam adipiscing vitae proin sagittis. Bibendum at varius vel pharetra vel turpis nunc. Bibendum at varius vel pharetra vel. Id diam vel quam elementum. Magna etiam tempor orci eu lobortis elementum nibh tellus. Ligula ullamcorper malesuada proin libero nunc. Gravida quis blandit turpis cursus. Ut pharetra sit amet aliquam id diam maecenas. Nisl rhoncus mattis rhoncus urna neque. Tempus egestas sed sed risus pretium quam vulputate dignissim. Et netus et malesuada fames ac. Malesuada fames ac turpis egestas maecenas pharetra convallis.";

var webView = FindViewById<Android.Webkit.WebView>(Resource.Id.webViewExtra);

webView.Visibility = ViewStates.Gone;
webView.Settings.VerticalScrollBarEnabled = true;
webView.Settings.JavaScriptEnabled = true;

var html = "<p>Lorem ipsum dolor sit amet consectetur adipiscing elit, malesuada per consequat conubia accumsan vulputate tincidunt, porttitor cum cras pretium diam inceptos. Augue fringilla id laoreet metus quisque eu accumsan ultrices fusce, vel hendrerit phasellus mollis arcu consequat risus suscipit, nostra orci lobortis at quis sed integer cubilia. Quisque turpis congue euismod class tristique magna at eros aenean quam, cum facilisis malesuada per auctor cubilia leo ultrices pharetra, praesent habitant ut nec feugiat velit pulvinar libero tellus.</p><p>Lorem ipsum dolor sit amet consectetur adipiscing elit, malesuada per consequat conubia accumsan vulputate tincidunt, porttitor cum cras pretium diam inceptos. Augue fringilla id laoreet metus quisque eu accumsan ultrices fusce, vel hendrerit phasellus mollis arcu consequat risus suscipit, nostra orci lobortis at quis sed integer cubilia. Quisque turpis congue euismod class tristique magna at eros aenean quam, cum facilisis malesuada per auctor cubilia leo ultrices pharetra, praesent habitant ut nec feugiat velit pulvinar libero tellus.</p><p>Lorem ipsum dolor sit amet consectetur adipiscing elit, malesuada per consequat conubia accumsan vulputate tincidunt, porttitor cum cras pretium diam inceptos. Augue fringilla id laoreet metus quisque eu accumsan ultrices fusce, vel hendrerit phasellus mollis arcu consequat risus suscipit, nostra orci lobortis at quis sed integer cubilia. Quisque turpis congue euismod class tristique magna at eros aenean quam, cum facilisis malesuada per auctor cubilia leo ultrices pharetra, praesent habitant ut nec feugiat velit pulvinar libero tellus.</p><p>Lorem ipsum dolor sit amet consectetur adipiscing elit, malesuada per consequat conubia accumsan vulputate tincidunt, porttitor cum cras pretium diam inceptos. Augue fringilla id laoreet metus quisque eu accumsan ultrices fusce, vel hendrerit phasellus mollis arcu consequat risus suscipit, nostra orci lobortis at quis sed integer cubilia. Quisque turpis congue euismod class tristique magna at eros aenean quam, cum facilisis malesuada per auctor cubilia leo ultrices pharetra, praesent habitant ut nec feugiat velit pulvinar libero tellus.</p><p>Lorem ipsum dolor sit amet consectetur adipiscing elit, malesuada per consequat conubia accumsan vulputate tincidunt, porttitor cum cras pretium diam inceptos. Augue fringilla id laoreet metus quisque eu accumsan ultrices fusce, vel hendrerit phasellus mollis arcu consequat risus suscipit, nostra orci lobortis at quis sed integer cubilia. Quisque turpis congue euismod class tristique magna at eros aenean quam, cum facilisis malesuada per auctor cubilia leo ultrices pharetra, praesent habitant ut nec feugiat velit pulvinar libero tellus.</p><p>Lorem ipsum dolor sit amet consectetur adipiscing elit, malesuada per consequat conubia accumsan vulputate tincidunt, porttitor cum cras pretium diam inceptos. Augue fringilla id laoreet metus quisque eu accumsan ultrices fusce, vel hendrerit phasellus mollis arcu consequat risus suscipit, nostra orci lobortis at quis sed integer cubilia. Quisque turpis congue euismod class tristique magna at eros aenean quam, cum facilisis malesuada per auctor cubilia leo ultrices pharetra, praesent habitant ut nec feugiat velit pulvinar libero tellus.</p><p>Lorem ipsum dolor sit amet consectetur adipiscing elit, malesuada per consequat conubia accumsan vulputate tincidunt, porttitor cum cras pretium diam inceptos. Augue fringilla id laoreet metus quisque eu accumsan ultrices fusce, vel hendrerit phasellus mollis arcu consequat risus suscipit, nostra orci lobortis at quis sed integer cubilia. Quisque turpis congue euismod class tristique magna at eros aenean quam, cum facilisis malesuada per auctor cubilia leo ultrices pharetra, praesent habitant ut nec feugiat velit pulvinar libero tellus.</p><p>Lorem ipsum dolor sit amet consectetur adipiscing elit, malesuada per consequat conubia accumsan vulputate tincidunt, porttitor cum cras pretium diam inceptos. Augue fringilla id laoreet metus quisque eu accumsan ultrices fusce, vel hendrerit phasellus mollis arcu consequat risus suscipit, nostra orci lobortis at quis sed integer cubilia. Quisque turpis congue euismod class tristique magna at eros aenean quam, cum facilisis malesuada per auctor cubilia leo ultrices pharetra, praesent habitant ut nec feugiat velit pulvinar libero tellus.</p>";

if (!string.IsNullOrEmpty(html))
{

    html = $@"<!DOCTYPE html>
            <html>
                <head>
                    <meta charset='utf-8' />
                    <meta name='viewport' content='width=device-width, initial-scale=1'>
                </head>
                <body style='margin: 0px; background: #fafafa'>{html}</body>
            </html>";

    webView.SetWebViewClient(new JSOverviewHelper());

    webView.LoadData(html, "text/html", "UTF-8");

    webView.Reload();
}

public class JSOverviewHelper : WebViewClient
{
    public override void OnPageFinished(WebView webView, string url)
    {
        base.OnPageFinished(webView, url);

        webView.Visibility = Android.Views.ViewStates.Visible;
    }
}
Also, I tried to calculate the height using a JS function and didn't work also. The height that was returned tended to be the current height of the WebView + 1px. However, if I run the same function using chrome://inspect then it returned the correct one.

public override void OnPageFinished(WebView webView, string url)
{
    base.OnPageFinished(webView, url);

    webView.Visibility = ViewStates.Visible;

    Thread.Sleep(1000);

    webView.EvaluateJavascript(@"(function() {
                                    var body = document.body,
                                        html = document.documentElement;

                                    return Math.max(body.scrollHeight, body.offsetHeight,
                                                            html.clientHeight, html.scrollHeight, html.offsetHeight);
                                        })();", new WebViewValueCallback(webView));
}

public class WebViewValueCallback : Object, IValueCallback
{
    private readonly WebView webView;

    public WebViewValueCallback(WebView webView)
    {
        this.webView = webView;
    }

    public void OnReceiveValue(Object value)
    {
        var result = Convert.ToString(value);
        ViewGroup.LayoutParams vc = webView.LayoutParameters;
        vc.Height = int.Parse(Convert.ToString(value));
        webView.LayoutParameters = vc;
    }
}
Additionally, I tried using the OnPageCommitVisible (it was triggered before OnPageFinished) and OnProgressChanged using a custom class based on WebChromeClient as suggested here, and when it reached 100% the JS function still returned a different value than the expected one, it always returned either 0 or the current WebView height + 1.

What else did I try? I set a predefined height in the WebView to test the app, created a static page, and loaded the data with JS, but still, the returned height was incorrect.

Any idea how can I adjust the height to the latest one after it's loaded? Thanks.

P.S.:

If you know how to fix it in Java or Kotlin for Android, I most likely will know how to transform it to C#.
The TextView is mandatory because it shows an extract before the website that can be optional.

Adding some extra details from the stack question. I'm consuming the Wikipedia API that is providing me the information and I'm displaying inside the WebView using a local page (the unscrollable thing). How do I know about the issue? Because there are multiple questions in Stack Overflow about creating a WebView that wraps to its content and most of them are unsuccessful, my answer even though was trolled with -1 votes yesterday is the most successful in my opinion since I'm able to get from time to time the right height. I discover the problem because when I was doing chrome://inspect and checked the website, it had the content but it always returned 0 as its height and I was stuck in that point.

Furthermore, here is a video where the webview is failing: https://youtu.be/PmrCnI-y3zE

Thanks.

Thank you for providing more feedback. Adding the requester to the cc list.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

I have some sections in JS that is double checking that there is content after it gets the data with something like this:

if (content.innerHTML !== "") {
            let latestHeight = getLatestHeight();

            if (latestHeight === 0) {
                for (let j = 0; j < 20; j++) {
                    setTimeout(function () { }, 200);

                    latestHeight = getLatestHeight();

                    if (latestHeight > 0) {
                        break;
                    }
                }
            }

            if (latestHeight === 0) {
                CSharp.CurrentHeight(-1);
                return;
            }

            CSharp.CurrentHeight(latestHeight);
            content.style.height = `${latestHeight}px`;
        }

function getLatestHeight() {
    let body = document.body,
        html = document.documentElement;

    return Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
}

But even after so many execs and two validations in the C# part is still returning 0:

private const int MIN_PIXELS = 300;
        private const int MIN_EXECS = 3;
        private static int? minusOneCount;

        public CallJSInterface()
        {
            minusOneCount = 0;
        }

        private async void DelayWebViewReloading()
        {
            await Task.Factory.StartNew(() =>
            {
                Thread.Sleep(1000);
                MainThread.BeginInvokeOnMainThread(() =>
                {
                    OverviewFragment.WebViewExtras.Reload();
                });
                minusOneCount++;
            });
        }

        [Export]
        [JavascriptInterface]
        public void CurrentHeight(int height)
        {
            if (height == -1 && minusOneCount < MIN_EXECS)
            {
                DelayWebViewReloading();
                return;
            }
       }

Even after all these validations it returns 0.

And this is not a Xamarin bug because here you have multiple related questions:
https://stackoverflow.com/questions/1973565/how-to-resize-a-android-webview-after-adding-data-in-it
https://stackoverflow.com/questions/1991219/webview-wrap-content
https://stackoverflow.com/questions/15599931/webview-not-wraping-content
https://issuetracker.google.com/issues/36931043
https://stackoverflow.com/questions/14519721/how-to-make-webviews-as-large-as-its-content
https://stackoverflow.com/questions/15599931/webview-not-wraping-content
https://stackoverflow.com/questions/22878069/android-get-height-of-webview-content-once-rendered/51609775

My current solution is a mix of many of them.

Thanks for providing the updates as per C#2.
There are no manual repro steps to proceed with the issue from our end. Hence, marking the issue as untriaged to be picked up by dev team and to push the issue out of our triaging bucket.
Thanks...!!

Yes, this is mainly a Software Development issue, you should inspect the element and most likely something is odd with the V8 or something else. I'm not really sure but the JS thing that is doing the calculations should double-check if there is any content before supposing that the height is 0.

When the layout_height of WebView or any of its ancestors is wrap_content, if I read the code correctly, the initial height of the WebView is 0 [1], we have tests [2] to ensure this. But other than this, I am not very familiar with how WebView's wrap_content works, i.e. when it will correctly calculate the actual height and when is the right time to get the value.

Bo, could you please take a look, thanks!

For people who are not familiar with Chromium code, the WebView term in the test is not the Android WebView, but a Chromium concept.

[1] https://source.chromium.org/chromium/chromium/src/+/main:android_webview/java/src/org/chromium/android_webview/AwLayoutSizer.java;drc=efa2fd9684708e32cb85de0f6b8477b1095dce8c;l=194
[2] https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/frame/web_frame_test.cc;drc=41c52e1611e0319050bc5b60cbf165020ad5822d;l=2057

Hi, all the calculations are already shared but the bug happens when the data was fully loaded. On some rare cases this JS function:

function getLatestHeight() {
    let body = document.body,
        html = document.documentElement;

    return Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
}

is still returning 0. It makes no sense because there is already data. I tried to reload the page, waiting a couple of seconds, etc. and still the result was 0. How do I know there is data? Because I set a predefined height in these cases and shows part of the website (that is unscrollable).

Yeah, don't use layout_height=wrap_contents on the app side.

wrap_contents is asking the webview to size itself (ie the document viewport) according to the web content. If the web content is sizing itself according to the (height of the) viewport, then there is no way to reasonably resolve this.

Indeed, that's why I get the height with JavaScript:

function getLatestHeight() {
    let body = document.body,
        html = document.documentElement;

    return Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
}



The main problem is that the provided JS function returns 0 even though it's not 0 because there is data. This is my main problem, I don't expect the wrap_contet do the job because I lalready fixed it with the code I shared before.

The problem is a real problem because it has been reported something similar 10 years ago in StackOverflow:
https://stackoverflow.com/questions/6937378/element-offsetheight-always-0/27729544#27729544

This solution more or less fixed my case, it added a massive extra space at the bottom but at least it worked.

This issue was migrated from crbug.com/chromium/1232745?no_tracker_redirect=1

[Monorail components added to Component Tags custom field.]