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

ar-eso commented 7 months ago

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.

<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="WebViewPdf.MainPage">

<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

Create a new .NET MAUI app
Add 2 WebView controls (first showing and HTML page and the second containing a PDF doc) that are encapsulated in a ScrollView
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 commented 7 months ago

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

drasticactions commented 7 months ago

Duplicate of https://github.com/dotnet/maui/issues/18716

ESO-ST commented 7 months ago

@drasticactions I noticed this was closed and marked as duplicate of https://github.com/dotnet/maui/issues/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 commented 6 months ago

@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 commented 6 months ago

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 commented 6 months ago

@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 commented 5 months ago

/similarissues

github-actions[bot] commented 5 months ago

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 commented 5 months ago

Duplicate of https://github.com/dotnet/maui/issues/18716

dotnet / maui