Transparent status bar shows webview content while scrolling IOS

Question

i have put a webview, Anroid is working fine but on IOS, when i scroll, i see the content scrolling behind the transparent status bar. Click and see the top left corner of the image

i have tried using safari related css adding margins and paddings but its not working

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        var browser = new WebView();
        browser.Source = "https://xxxxxxxxxxxxxxxx.net/";
        Content = browser;
    }
}

i expect that the status bar goes opaque and scrolled content doesn't show behind the status bar.

Hi ,have you solved it ?

Junior Jiang
– Junior Jiang

2019-10-23 06:06:53 +00:00
Commented Oct 23, 2019 at 6:06 — Junior Jiang
– Junior Jiang, Commented Oct 23, 2019 at 6:06

Junior Jiang · Accepted Answer · 2019-10-21 06:49:48Z

0

This reason results from Safe Area in IOS devices . Refering to Safe Area Layout Guide on iOS , you can set safe area be true in Xamarin Forms:

<ContentPage ...
             xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
             Title="Safe Area"
             ios:Page.UseSafeArea="true">
    <StackLayout>
        ...
    </StackLayout>
</ContentPage>

My content page is as follow :

public MainPage()
{
    InitializeComponent();

    var browser = new WebView();
    browser.Source = "https://learn.microsoft.com/en-us/appcenter/test-cloud/starting-a-test-run";
    Content = browser;
}

The final effect :

answered Oct 21, 2019 at 6:49

Junior Jiang

12.7k1 gold badge14 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Transparent status bar shows webview content while scrolling IOS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related