WebView Background Color Property Changing Doesn't Work

[osmanghaziurdu]

Description

I am using webview inside Content Page (XAML). When i set webview background color to e.g black or blue, color does not changes. Even if i use webview inside layouts such as stacklayout and try to change background color of layout, this condition also doesn't fulfills

Steps to Reproduce

1. Create a content page (XAML)
2. Use webview inside content page that fills whole page
3. Try to change background color of webview / background color of content page / background color of layout

Expected Behavior

Color should be changed to something like black or blue or red etc

Actual Behavior

Nothing happens and webview background remains unchanged

Basic Information

• Platform Target Frameworks:
  • iOS: Not tested as i don't need it
  • Android: 10
  • UWP: Not tested as i don't need it
• Affected Devices: Tested on Physical android device Huawei Tit Al00 and on Emulatore Google Nexus 4 running Android 10

[rachelkang]

Hi, @osmanghaziurdu - thanks for submitting this issue! Would you mind clarifying a bit more on what you're use case is? What exactly are you trying to change the color of? You unfortunately won't be able to change any colors or anything inside the WebView itself; however, if you're trying to set the background color of the space around the WebView, that's definitely feasible! You can try something like the following:

<StackLayout BackgroundColor="Green" Padding="10">
        <WebView HeightRequest="1000" WidthRequest="1000" Source="http://www.xamarin.com"/>
</StackLayout>

If I'm misunderstanding your issue or if this solution doesn't work, please let me know! If you could also share a project replacing this issue, that would also be very helpful. Thanks again, and hope this helps!

[atifc]

I reproduced this as well.

WebView has the following property: BackgroundColor.

Setting this property to any color - has no effect. If wrapping the WebView in a StackLayout is required, than the property BackgroundColor of WebView is misleading (it does not work/has no effect) and should be removed altogether.

[rachelkang]

@osmanghaziurdu @atifc thanks for sharing - I can definitely see why this is confusing!

Our code allows you to set a BackgroundColor directly to the WebView - what this really means is that the BackgroundColor is set on the surface that the WebView control is nested on. And so even though the BackgroundColor probably is being set, we just can't see it since WebView takes up the entire contents of the view!

This would be easier to understand/see if we could add Padding to WebView which we currently cannot - so I'll be moving this to Enhancements so the proposal can be further explored. [@atifc We unfortunately can't remove it altogether since WebView is a VisualElement, which is what BackgroundColor is part of.] If you have additional/alternative suggestions, feel free to share theme here.

So for now, wrapping the WebView in a StackLayout or another layout would be a workaround.

Rather than setting the color of the space around the WebView (as I've been assuming up to this point), if your goal is to change the background color of the WebView itself, you'd have to add some custom css.

Hope this helps! :)

[atifc]

Thank you for clearing this up @rachelkang, it makes much more sense now. I used custom CSS to achieve what was required.

[MaxFmi]

You can also set the following in the renderer of WebView

• Android: Control.SetBackgroundColor(background.ToAndroid());
• iOS: UIColor iosColor = backgroundColor.ToUIColor();
  base.ScrollView.BackgroundColor = iosColor;
  base.BackgroundColor = iosColor;
  base.Opaque = false;

[Lucscom]

Ran into the same issue, at least an option for making the background transparent would be awesome!

[thunderhead021]

Ran into the same problem in .Net Maui. My work around for this is to get the HTML as string and add the background color to the HTML body tag directly.