Search code examples
androidhtmlcsswebview

Android webview rendering nothing after "#" character

I have an android application and I need to show a webview with my custom website. My problem is that the webview renders nothing. After using the "Element inspector" I could see that any HTML was being displayed after the first "#". For example, if my web is:


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>a</title>
        <style>
            html {
                color: #ff0000;
            }
        </style>

    </head>

    <body>
        <h1>My awesome title</h1>
    </body>
</html>

the rendered HTML on the webview will be: 


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>a</title>
        <style>
            html {
                color: 
    <body>
    </body>
</html>

I can use rgb colors. But I want to know what is going on here. Another example to clarify my problem is:


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>a</title>
        <style>
            html {
                color: rgb(255, 0, 0);
            }
        </style>

    </head>

    <body>
        <h1>My awesome #title</h1>
        <p>this won't be displayed</p>
    </body>
</html>

the rendered HTML on the webview will be: 


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>a</title>
        <style>
            html {
                color: rgb(255, 0, 0);
            }
        </style>

    </head>

    <body>
        <h1>My awesome </h1>
    </body>
</html>

Thanks for the help

Solution

  • The solution for me was to replace # with %23.

    This change to the webview was introduced with the Chrome 72 update on 30th of January.

    This pull request seems to be the reason why webview is broken after #: https://chromium-review.googlesource.com/c/chromium/src/+/1297172.