Xamarin.Forms WebView not rendering position:fixed css correctly?

Question

I'm trying to build a cross-platform app in Xamarin using Xamarin Forms that just views my site. Most of the stuff is working really well, but I've come across a big problem under Android. I made a test Xamarin app not using Xamarin Forms, just the native Android stuff Xamarin offers, to test if its just a Forms issue. Turns out it seems to be...

The issue seems to be that the Xamarin Forms WebView is rendering the css for “position:fixed” VERY incorrectly, while under the “native” Xamarin Andoid app everything is rendered as would be expected.

Now as far as I understood, Xamarin Forms should use the same underlying html renderer as the “native” app’s html renderer, which I imagined to be Chromium under Android 4.4 and above.

Is this not the case? Perhaps this is a known bug? Or just a setup issue on my side?

Below are images illustrating the bug. As you can see, the big blue bar is not rendered correctly on the right.

enter image description here

This is the test HTML the apps are rendering to illustrate the bug:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div style="background: blue; height:100px; width: 100%; position:fixed; left: 0; top: 0;">
        <div style="margin:0 auto; width: 200px;">
            <p style="color: white;">HELLO WORLD</p>
        </div>
    </div>
</body>

Any help on this would be GREATLY appreciated!
Thanks,
Bas

G.Mich G.Mich · Accepted Answer · 2017-03-27T09:32:41

The problem is not in a html . Add height on a WebView or put it in Grid row.

https://developer.xamarin.com/guides/xamarin-forms/user-interface/webview/

Xamarin.Forms WebView not rendering position:fixed css correctly?

1 Answers