I am currently in the process of creating a cross-platform app using Xamarin in conjunction with Xamarin Forms to simply display my website. Things have been going smoothly for the most part, but I have encountered a significant issue on Android. To investigate further, I created a test Xamarin app that does not utilize Xamarin Forms, only the native Android features provided by Xamarin. Surprisingly, it seems like the problem lies within Xamarin Forms...
The main issue appears to be related to how the Xamarin Forms WebView handles the CSS property "position:fixed". This rendering discrepancy is not present when viewing the content through the "native" Xamarin Android app.
Based on my understanding, Xamarin Forms should use the same underlying HTML renderer as the native app, which I assumed to be Chromium for Android versions 4.4 and above.
If this assumption is incorrect, could it be a known bug? Or possibly an error in my setup?
Below are visual representations of the issue. Notice how the large blue bar is not displayed correctly on the right side.
Here is the sample HTML code used to demonstrate the problem:
<!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 assistance with resolving this issue would be HIGHLY appreciated!
Thank you,
Bas