WebView is not working correctly in IOS MAUI

Hello,

Since .NET MAUI 8 is out of support, I recommend upgrading to .NET MAUI 9 or later for continued support and improvements.

WebView Interaction Issues (iOS-Specific)

On iOS, WebView is backed by WKWebView, which runs with strict security boundaries and behaves differently than Android’s WebView.

For full interaction support, explicitly wire up:

• WKUIDelegate for JavaScript dialogs (alert/confirm/prompt) and pop-up interactions.
• WKNavigation for navigation decisions, window handling, and tighter control of JavaScript execution.
• Touch and input handling to ensure focus, gestures, and text input behave correctly in form fields.

LiveSwitch Media Issues (iOS and Android)

The microphone and camera issues arise from missing platform-specific permissions required by LiveSwitch for media access:

• iOS: Requires explicit declarations in the Info.plist file for camera and microphone usage.
• Android: Requires permissions in the AndroidManifest.xml file for camera, audio recording, and audio settings modification.

Solutions

1. Resolving WebView Interaction Issues on iOS

You just need to implement a custom WebView handler that includes the necessary iOS delegates.

A basic example would look like this:

using Microsoft.Maui.Handlers;
using WebKit;
using UIKit;
using Foundation;
 
namespace YourApp.Platforms.iOS
{
    public class CustomWebViewHandler : WebViewHandler
    {
        protected override WKWebView CreatePlatformView()
        {
            var config = new WKWebViewConfiguration
            {
                Preferences = new WKPreferences
                {
                    JavaScriptEnabled = true
                }
            };
 
            var webView = new WKWebView(Frame, config)
            {
                UIDelegate = new CustomUIDelegate(),
                NavigationDelegate = new CustomNavigationDelegate()
            };
 
            return webView;
        }
 
        private class CustomUIDelegate : WKUIDelegate
        {
            public override void RunJavaScriptAlertPanel(WKWebView webView, string message, WKFrameInfo frame, Action completionHandler)
            {
                var alert = UIAlertController.Create("Alert", message, UIAlertControllerStyle.Alert);
                alert.AddAction(UIAlertAction.Create("OK", UIAlertActionStyle.Default, _ => completionHandler()));
                UIApplication.SharedApplication.KeyWindow?.RootViewController?.PresentViewController(alert, true, null);
            }
        }
 
        private class CustomNavigationDelegate : WKNavigationDelegate
        {
            public override void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
            {
                Console.WriteLine("Navigation finished.");
            }
        }
    }
}

Register this custom handler in your MauiProgram.cs:

builder.ConfigureMauiHandlers(handlers =>
{
#if IOS
    handlers.AddHandler(typeof(WebView), typeof(CustomWebViewHandler));
#endif
});

2. Resolving LiveSwitch Media Issues

To enable microphone and camera functionality, configure the following platform-specific permissions:

iOS (Update Info.plist):

<key>NSCameraUsageDescription</key>
<string>Camera access needed for video calls</string>
<key>NSMicrophoneUsageDescription</key>
<string>Microphone access needed for voice calls</string>

Android (Update AndroidManifest.xml):

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

Ensure that runtime permission requests are implemented for Android, as required by modern Android versions.

I hope this resolves your issues.

References

• .NET MAUI WebView - Microsoft Learn
• WebViewHandler.iOS.cs - GitHub
• WKWebView - Apple
• WKUIDelegate - Apple
• WKNaviation - Apple

@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

1. 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>
   

2. 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>"  
   

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

Thanks.

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