WebView is not working correctly in IOS MAUI

Question

WebView is not working correctly in IOS MAUI

Shraddha Chauhan 0

I have added a webview in my MAUI crossplateform app but I am not able to type in textbox or click on image buttons even pop up shows up but not able to even ok/cancel.

While working fine with Android,

Another issue with voice and video that is happening on both Android and IOS. I am using third party lib (LiveSwitch) to start local/remote media , code says its started but neither microphone work not camera is opening.

I am using MVVM framework and .Net 8.

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,441 Reputation points Microsoft External Staff

2025-02-28T05:26:42.0366667+00:00

Which device are you testing on? Does this issue occur with .NET9? Could you share some code snippets so that I can test and reproduce the issue?
Mubashar Hussain 0 Reputation points

2025-02-28T12:54:10.95+00:00

same issue

2 answers

Your answer

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,441 Reputation points Microsoft External Staff

2025-02-28T05:26:42.0366667+00:00

Which device are you testing on? Does this issue occur with .NET9? Could you share some code snippets so that I can test and reproduce the issue?
Mubashar Hussain 0 Reputation points

2025-02-28T12:54:10.95+00:00

same issue

Answer 1

Mubashar Hussain 0

I have same issue with Maui WebView is not working on IOS; But working Fine with Android

Shraddha Chauhan 0

Hi Wenyan Zhang,

I am adding code below that I am using for Android/ios.

I am not using .NET 9 as of now.

XAML PAGE:
<CWV:HybridWebView

x:Name="chatWebView"

Grid.Row="0"

JavaScriptAction="chatWebView_JavaScriptAction"

Source="{Binding ChatPageURL}"

VerticalOptions="FillAndExpand" />

Custom Handlers:
public interface IHybridWebView : IView

{

   event EventHandler<SourceChangedEventArgs> SourceChanged;

   event EventHandler<JavaScriptActionEventArgs> JavaScriptAction;

   event EventHandler<EvaluateJavaScriptAsyncRequest> RequestEvaluateJavaScript;

   void Refresh();

   Task EvaluateJavaScriptAsync(EvaluateJavaScriptAsyncRequest request);

   WebViewSource Source { get; set; }

   void Cleanup();

   void InvokeAction(string data);

}

public class HybridWebView : View, IHybridWebView

{

   public event EventHandler<SourceChangedEventArgs> SourceChanged;

   public event EventHandler<JavaScriptActionEventArgs> JavaScriptAction;

   public event EventHandler<EvaluateJavaScriptAsyncRequest> RequestEvaluateJavaScript;

   public static Action GoBackAction;

   public static Action GoForwordAction;

   public static Action ReloadAction;

   public HybridWebView()

   {

   }

   public async Task EvaluateJavaScriptAsync(EvaluateJavaScriptAsyncRequest request)

   {

       await Task.Run(() =>

       {

           RequestEvaluateJavaScript?.Invoke(this, request);

       });

   }

   public void Refresh()

   {

       if (Source == null) return;

       var s = Source;

       Source = null;

       Source = s;

   }

   public WebViewSource Source

   {

       get { return (WebViewSource)GetValue(SourceProperty); }

       set { SetValue(SourceProperty, value); }

   }

   public static readonly BindableProperty SourceProperty = BindableProperty.Create(

     propertyName: "Source",

     returnType: typeof(WebViewSource),

     declaringType: typeof(HybridWebView),

     defaultValue: new UrlWebViewSource() { Url = "about:blank" },

     propertyChanged: OnSourceChanged);

   private static void OnSourceChanged(BindableObject bindable, object oldValue, object newValue)

   {

       var view = bindable as HybridWebView;

       bindable.Dispatcher.Dispatch(() =>

       {

           view.SourceChanged?.Invoke(view, new SourceChangedEventArgs(newValue as WebViewSource));

       });

   }

   public void Cleanup()

   {

       JavaScriptAction = null;

   }

   public void InvokeAction(string data)

   {

       JavaScriptAction?.Invoke(this, new JavaScriptActionEventArgs(data));

   }

}

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,441 Reputation points Microsoft External Staff

2025-03-03T09:23:37.1633333+00:00

From the code snippets, I know you are using HybridWebView, please try adding AppContext.SetSwitch("HybridWebView.InvokeJavaScriptThrowsExceptions", true); and see if there are the JavaScript exceptions. Refer to HybridWebView - .NET MAUI | Microsoft Learn

Answer 2

@Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) rendering html in iOS platform has never worked in .net maui.
Here is an example using .NET 9, iPhone 14 (iOS 18.5), VS2022 Version 17.14.7

XAML snippet <ContentPage.Content>

<ScrollView Padding="{OnIdiom Tablet='40, 10', Phone={OnPlatform Android='15, 15, 10, 0', iOS='20, 15, 15, 0'}}" VerticalOptions="Fill">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="40"/>

            <RowDefinition Height="*"/>

            <RowDefinition Height="*"/>

            <RowDefinition Height="60"/>

            <RowDefinition Height="*"/>

            <RowDefinition Height="100"/>

        </Grid.RowDefinitions>

        <Label HorizontalOptions="Start" Margin="0,0,0,5" Grid.Row="0"

               Text="{mx:Localize TesterResults}"

               FontSize="{StaticResource FontSizeLarge}"

               VerticalTextAlignment="Center" />

        <StackLayout BindableLayout.ItemsSource="{Binding TesterResultList, Mode=TwoWay}" 

                  BackgroundColor="{StaticResource separatorColor}" Grid.Row="1"

                 Margin="2,2,2,2"

                 x:Name="testerResultListStackLayout">

            <BindableLayout.ItemTemplate>

                <DataTemplate>

                    <Grid HorizontalOptions="Start" RowSpacing="90" Margin="0,0,0,0">

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition Width="{OnIdiom Tablet='150', Phone='90'}"/>

                            <ColumnDefinition Width="*" />

                        </Grid.ColumnDefinitions>

                        <Grid.RowDefinitions>

                            <RowDefinition Height="Auto"/>

                        </Grid.RowDefinitions>

                        <BoxView Grid.Row="0" Grid.Column="0" VerticalOptions="End" BackgroundColor="White" HeightRequest="1"/>

                        <Label Grid.Row="0" Grid.Column="0" TextColor="{StaticResource blackTextColor}"

                               Margin="2,2,0,0" 

                               FontSize="{OnPlatform Android='17',iOS='16'}"

                               LineBreakMode="WordWrap"

                               FontAttributes="Bold"

                               VerticalOptions="Start"

                               HorizontalOptions="Start"

                               Text="{Binding Title}"/>

                        <OnPlatform x:TypeArguments="View" >

                            <On Platform="Android">

                                <WebView HeightRequest="40"                                                

                                        Grid.Column="1" 

                                        Grid.Row="0"  

                                        HorizontalOptions="Start"

                                        VerticalOptions="Start">

                                    <WebView.Source>

                                        <HtmlWebViewSource Html="{Binding Description}"/>

                                    </WebView.Source>

                                </WebView>

                            </On>

                            <On Platform="iOS">

                                <StackLayout Grid.Row="0" BackgroundColor="{StaticResource dataGridBackgroundColor}"

                                       Grid.Column="1">

                                    <Label Grid.Row="0"

                                       Grid.Column="1"

                                       FontSize="17"

                                       TextColor="{StaticResource blackTextColor}"

                                       LineBreakMode="WordWrap"

                                       HorizontalOptions="Start"

                                       Text="{Binding Description}"

                                       VerticalOptions="Start"

                                       VerticalTextAlignment="Start" 

                                       TextType="Html"/>

                                </StackLayout>

                            </On>

                        </OnPlatform>

                    </Grid>

                </DataTemplate>

            </BindableLayout.ItemTemplate> 

        </StackLayout>

Description & Title data (Use a view model for binding):
Title= "Caution"

	Description=	"<!DOCTYPE html><html><body style="font-size:16px"><p>The battery is still serviceable however, it does have decreased capacity and may not start the vehicle or may fail under extreme climate conditions.</p></body></html>"

	Title=	"Recharge & Retest"

	Description=	"<!DOCTYPE html><html><body style="font-size:16px"><p>The battery may be too severely discharged to determine the condition of the battery. Possible reasons:</p><ol><li><b>Loads left on: </b>Were there any lights left on, doors left open, or accessories plugged in for an extended time?</li><li><b>Vehicle storage: </b>Has the vehicle been sitting for over 90 days without a battery tender hooked up?</li><li><b>Options:</b><ul style="list-style-type: square;"><li>Take vehicle to a Club Owned Repair or Approved Auto Repair facility and have the battery professionally charged and retested.</li><li>Install the correct AAA/CAA Premium Battery at a competitive price with a 3-year warranty.</li></ul></li></ol></body></html>"

	Title=	"Bad and Replace"

	Description=	   "<!DOCTYPE html><html><body style="font-size:16px"><p>Battery has reached its end of life and replacement of battery is recommended.</p><ol><li><b>Age of the battery: </b>If over three years old, replacement is recommended.</li><li><b>Battery condition: </b>If corrosion is located on the battery posts or around the rim of the battery it is possible the battery is at its end of life.</li><li><b>State of Health: </b>A low State of Health determination from the tester means the battery will not recover to normal operation even with a professional charge.</li><li><b>Options:</b><ul style="list-style-type: square;"><li>Install the correct AAA/CAA Premium Battery at a competitive price with a 3-year warranty.</li></ul></li></ol></body></html>"

Page in Android Phone
Same page in iPhone 14 (iOS 18.5) - html formatting is gone:

Thanks.

Share via

WebView is not working correctly in IOS MAUI

2 answers

Your answer