WebView in MAUI project doesn't scroll when has a PDF file loaded

[ar-eso]

Description

Scrolling is not working when a PDF file is loaded on WebView in a MAUI project even when the WebView is encapsulated in a ScrollView. If the WebView get a HTML file loaded, then scrolling works.

<ScrollView>
    <Grid VerticalOptions="FillAndExpand">
        <Grid.RowDefinitions>
            <RowDefinition Height="520"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="520"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <ScrollView Grid.Row="0" BackgroundColor="Yellow" Padding="10">
            <Grid VerticalOptions="FillAndExpand">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <WebView
                    HorizontalOptions="Fill"
                    VerticalOptions="StartAndExpand"
                    HeightRequest="500"
                    Source="Sample.html"/>
            </Grid>
        </ScrollView>
        
        <Image Grid.Row="1"
            Source="dotnet_bot.png"
            HeightRequest="185"
            Aspect="AspectFit"
            SemanticProperties.Description="dot net bot in a race car number eight" />

        <ScrollView Grid.Row="2" BackgroundColor="Red" Padding="10">
            <Grid VerticalOptions="FillAndExpand">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <WebView
                    HorizontalOptions="Fill" 
                    VerticalOptions="StartAndExpand"
                    HeightRequest="500"
                    Source="WebViewClassDoc.pdf"/>
            </Grid>
        </ScrollView>

        <Image Grid.Row="3"
            Source="dotnet_bot.png"
            HeightRequest="185"
            Aspect="AspectFit"
            SemanticProperties.Description="dot net bot in a race car number eight" />

        <Label Grid.Row="4"
            Text="Hello, World!"
            Style="{StaticResource Headline}"
            SemanticProperties.HeadingLevel="Level1" />

        <Image Grid.Row="5"
            Source="dotnet_bot.png"
            HeightRequest="185"
            Aspect="AspectFit"
            SemanticProperties.Description="dot net bot in a race car number eight" />

        <Label Grid.Row="6"
            Text="Welcome to &#10;.NET Multi-platform App UI"
            Style="{StaticResource SubHeadline}"
            SemanticProperties.HeadingLevel="Level2"
            SemanticProperties.Description="Welcome to dot net Multi platform App U I" />

        <Image Grid.Row="7"
            Source="dotnet_bot.png"
            HeightRequest="185"
            Aspect="AspectFit"
            SemanticProperties.Description="dot net bot in a race car number eight" />

        <Button Grid.Row="8"
            x:Name="CounterBtn"
            Text="Click me" 
            SemanticProperties.Hint="Counts the number of times you click"
            Clicked="OnCounterClicked"
            HorizontalOptions="Fill" />

        <Image Grid.Row="9"
            Source="dotnet_bot.png"
            HeightRequest="185"
            Aspect="AspectFit"
            SemanticProperties.Description="dot net bot in a race car number eight" />

    </Grid>
</ScrollView>

In the code above there are two WebView controls added. The first has a yellow background and one contains a HTML page that scroll just fine. The second WebView has a red background and contains a PDF file that doesn't scroll.

Steps to Reproduce

1. Create a new .NET MAUI app
2. Add 2 WebView controls (first showing and HTML page and the second containing a PDF doc) that are encapsulated in a ScrollView
3. Compare scrolling in the two WebView controls.

Link to public reproduction project repository

https://github.com/ar-eso/WebViewPdf

Version with bug

8.0.3 GA

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 17

Did you find any workaround?

No response

Relevant log output

No response

[Zhanglirong-Winnie]

Verified this issue with Visual Studio 17.10.0 Preview 2 (8.0.10). Can repro on iOS platform with sample project.

[drasticactions]

Duplicate of #18716

[ESO-ST]

@drasticactions
I noticed this was closed and marked as duplicate of #18716
I would like to add that in addition to not being able to scroll a pdf in a webview, the webview is not setting its height properly when showing a PDF.

In the provided repro the height of the webview is manually being set, otherwise it wouldn't show. When in practice we should not be manually setting its height.

[PureWeen]

@drasticactions I noticed this was closed and marked as duplicate of #18716 I would like to add that in addition to not being able to scroll a pdf in a webview, the webview is not setting its height properly when showing a PDF.

In the provided repro the height of the webview is manually being set, otherwise it wouldn't show. When in practice we should not be manually setting its height.

Can you expand on your scenario a bit? I don't quite understand your layout of

ScrollView => Grid => WebView

for something to be scrollable the outer scrollable container has to be smaller than the content, so, at some point the outer container will need a constraint to know what size you want it to be.

Can you just use a WebView instead of the layering you have and then size the WebView to the size you want the user to see it at? And then the PDF will just be scrollable inside the WebView?

[nsood9]

I'm facing the exact same problem. I've implemented web view in my MAUI app, where I want to display multiple PDF docs and images. Images loads fine in the web view but the PDF docs never scrolls after loading into the web view. I've tried multiple layout, even added it to a scrollview, but nothing seems to be working. Did you find any solution or workaround in order to make the pdf scroll in the web view just like it does in a web browser?

[ar-eso]

@PureWeen

Can you expand on your scenario a bit? I don't quite understand your layout of

ScrollView => Grid => WebView

The layout contains a grid with multiple rows. Any of these rows can contain Frames with buttons, Edit controls, Date fields, Carousel View or a Webview that will display a PDF document. The Grid is wrapped in a ScrollView to enable vertical scrolling when necessary.
The row height is set to Auto for Carousel View, Frame or Date fields. For the WebView fix height value is allocated and scrolling needs to work to allow proper navigation of the PDF document.

The simplified sample app contains only images and label in the Grid's row.

[mattleibow]

/similarissues

[github-actions]

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

• [regression/8.0.3] [iOS] [SDK 17] Touch events are not working on WebView when a PDF is displayed. (#18716), similarity score: 0.83
• WebView Scale out of screen (#19188), similarity score: 0.76

Closed similar issues:

• The Webview does not display PDF (#7399), similarity score: 0.79
• .NET MAUI project using the PDF.js library - Issue loading the PDF from iOS resource (#19486), similarity score: 0.76
• [regression/8.0.3] Scrollview scrolling does not work in MAC and iOS platforms (#19005), similarity score: 0.76

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

[mattleibow]

Duplicate of #18716