search

dotnet / maui

.NET MAUI is the .NET Multi-platform App UI, a framework for building native device applications spanning mobile, tablet, and desktop.
https://dot.net/maui
MIT License
22.21k stars 1.75k forks source link

MAUI WebView is not displaying body background-image #4733

Closed TonyHenrique closed 2 years ago

TonyHenrique commented 2 years ago

Description

I have a HTML wich has a background image but on Android it is not appearing, only a white background.

<WebView Source="https://maui20220216.azurewebsites.net/test.html" />

I tried this same code on Xamarin and it correctly displays the background image.

The HTML page on the Source is like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="CartaoDescontoBlazorApp.styles.css" rel="stylesheet" />
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />

    <!-- Chrome, Firefox OS and Opera -->
    <meta name="theme-color" content="#185177">
    <!-- Windows Phone -->
    <meta name="msapplication-navbutton-color" content="#185177">
    <!-- iOS Safari -->
    <meta name="apple-mobile-web-app-status-bar-style" content="#185177">
</head>
<body style="min-width:100vw; min-height:100vh;background-image:url('https://way2tutorial.com/images/img_nat.png') !important; background-attachment:fixed; background-position:center bottom; background-size: cover;">

</body>
</html>

Steps to Reproduce

Create a page with this

 <html><body style="min-width:100vw; min-height:100vh;background-image:url('https://way2tutorial.com/images/img_nat.png') !important; background-attachment:fixed; background-position:center bottom; background-size: cover;"></body></html>

Publish this page

Create a new .NET MAUI Insert this code in MainPage.xaml

<WebView Source="https://maui20220216.azurewebsites.net/test.html" />

Then notice that the background image is not being displayed on the Mobile App on Android.

If you visit the URL on a Desktop, you can see the background image: https://maui20220216.azurewebsites.net/test.html

Examples:

MAUI:

Xamarin Forms:

Version with bug

Preview 13 (current)

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Android 11

Did you find any workaround?

No

Relevant log output

No response

pipearias2 commented 2 years ago

I have the same bug in my Maui App

v-longmin commented 2 years ago

Verified reproes. Repro project: [4733.zip](\\mlangfs1\Public\dotnet maui\Repro Project)

jsuarezruiz commented 2 years ago

Could you try to reproduce the issue again with Preview 14?. Cannot reproduce in main branch: image

ghost commented 2 years ago

Hi @TonyHenrique. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

TonyHenrique commented 2 years ago

OK, I created a simple repro and also attached a screenshot from my mobile phone (HMD Global Nokia 5.3 (Android 11.0 - API 30) to GitHub: https://github.com/TonyHenrique/MAUI-WebView-BackgroundImage

Microsoft Visual Studio Community 2022
Version 17.2.0 Preview 2.0
VisualStudio.17.Preview/17.2.0-pre.2.0+32314.265
Microsoft .NET Framework
Version 4.8.04161

Installed Version: Community

Visual C++ 2022   00482-90000-00000-AA734
Microsoft Visual C++ 2022

.NET Core Debugging with WSL   1.0
.NET Core Debugging with WSL

ADL Tools Service Provider   1.0
This package contains services used by Data Lake tools

ASA Service Provider   1.0

ASP.NET and Web Tools 2019   17.2.240.24236
ASP.NET and Web Tools 2019

Azure App Service Tools v3.0.0   17.2.240.24236
Azure App Service Tools v3.0.0

Azure Data Lake Tools for Visual Studio   2.6.5000.0
Microsoft Azure Data Lake Tools for Visual Studio

Azure Functions and Web Jobs Tools   17.2.240.24236
Azure Functions and Web Jobs Tools

Azure Stream Analytics Tools for Visual Studio   2.6.5000.0
Microsoft Azure Stream Analytics Tools for Visual Studio

C# Tools   4.2.0-2.22159.10+f3a5bad242b7a7b8149ae644de0a61c2f1bffc8d
C# components used in the IDE. Depending on your project type and settings, a different version of the compiler may be used.

Common Azure Tools   1.10
Provides common services for use by Azure Mobile Services and Microsoft Azure Tools.

Extensibility Message Bus   1.2.6 (master@34d6af2)
Provides common messaging-based MEF services for loosely coupled Visual Studio extension components communication and integration.

Microsoft Azure Hive Query Language Service   2.6.5000.0
Language service for Hive query

Microsoft Azure Stream Analytics Language Service   2.6.5000.0
Language service for Azure Stream Analytics

Microsoft JVM Debugger   1.0
Provides support for connecting the Visual Studio debugger to JDWP compatible Java Virtual Machines

Microsoft MI-Based Debugger   1.0
Provides support for connecting Visual Studio to MI compatible debuggers

Microsoft Visual Studio Tools for Containers   1.2
Develop, run, validate your ASP.NET Core applications in the target environment. F5 your application directly into a container with debugging, or CTRL + F5 to edit & refresh your app without having to rebuild the container.

Mono Debugging for Visual Studio   17.1.10 (65f98f5)
Support for debugging Mono processes with Visual Studio.

NuGet Package Manager   6.2.0
NuGet Package Manager in Visual Studio. For more information about NuGet, visit https://docs.nuget.org/

Office Developer Tools for Visual Studio   17.0.32314.00
Microsoft Office Developer Tools for Visual Studio

Razor (ASP.NET Core)   17.0.0.2215202+658e2db05d0daa9326356ee1edc85cd3d1b970c4
Provides languages services for ASP.NET Core Razor.

SQL Server Data Tools   17.0.62203.01080
Microsoft SQL Server Data Tools

SQLite & SQL Server Compact Toolbox   4.8
SQLite & SQL Server Compact Toolbox adds scripting, import, export, rename, query execution and much more to SQL Server Compact & SQLite Data Connections.

Test Adapter for Boost.Test   1.0
Enables Visual Studio's testing tools with unit tests written for Boost.Test.  The use terms and Third Party Notices are available in the extension installation directory.

Test Adapter for Google Test   1.0
Enables Visual Studio's testing tools with unit tests written for Google Test.  The use terms and Third Party Notices are available in the extension installation directory.

ToolWindowHostedEditor   1.0
Hosting json editor into a tool window

TypeScript Tools   17.0.10302.2001
TypeScript Tools for Microsoft Visual Studio

Visual Basic Tools   4.2.0-2.22159.10+f3a5bad242b7a7b8149ae644de0a61c2f1bffc8d
Visual Basic components used in the IDE. Depending on your project type and settings, a different version of the compiler may be used.

Visual F# Tools   17.1.0-beta.22108.1+63bcc94efda4fe19b612b167a25fdbcee796040b
Microsoft Visual F# Tools

Visual Studio IntelliCode   2.2
AI-assisted development for Visual Studio.

Visual Studio Tools for Containers   1.0
Visual Studio Tools for Containers

VisualStudio.DeviceLog   1.0
Information about my package

VisualStudio.Mac   1.0
Mac Extension for Visual Studio

VSPackage Extension   1.0
VSPackage Visual Studio Extension Detailed Info

Workflow Manager Tools 1.0   1.0
This package contains the necessary Visual Studio integration components for Workflow Manager.

Xamarin   17.2.0.67 (main@19e0f04)
Visual Studio extension to enable development for Xamarin.iOS and Xamarin.Android.

Xamarin Designer   17.2.0.64 (remotes/origin/main@3d19e6caf)
Visual Studio extension to enable Xamarin Designer tools in Visual Studio.

Xamarin Templates   17.1.13 (bb31b34)
Templates for building iOS, Android, and Windows apps with Xamarin and Xamarin.Forms.

Xamarin.Android SDK   12.2.99.130 (main/e89ae42)
Xamarin.Android Reference Assemblies and MSBuild support.
    Mono: f34bd77
    Java.Interop: xamarin/java.interop/main@aae23c97
    ProGuard: Guardsquare/proguard/v7.0.1@912d149
    SQLite: xamarin/sqlite/3.38.0@ccd83d8
    Xamarin.Android Tools: xamarin/xamarin-android-tools/main@f0b3abd

Xamarin.iOS and Xamarin.Mac SDK   15.7.0.410 (478c1d2c8)
Xamarin.iOS and Xamarin.Mac Reference Assemblies and MSBuild support.
Zelif commented 2 years ago

This seems to be an issue with the viewport and viewport units. No viewport units seem to work. (Fixed units work fine) Current Version: Preview 14

Is there a way to set the viewport correctly or wrap the WebView so it forces the viewport to be filled out? Will this be something the base WebView does not support and must be an override in a custom renderer per device?

PureWeen commented 2 years ago

@v-longmin can you try again with the latest and attach your repro project? It doesn't seem like it linked correctly

NonameMissingNo commented 2 years ago

@PureWeen Still repro on main ( using https://github.com/TonyHenrique/MAUI-WebView-BackgroundImage ) image

kristinx0211 commented 2 years ago

not repro on android 11 and 12 with 17.4.0 Preview 1.0 [32704.40.main]. image image

ghost commented 2 years ago

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

TonyHenrique commented 2 years ago

This issue was a show stopper for a project I was doing, because the customer had his Web App and the design included a background image that is not displayed on the client MAUI WebView on Android.

On the Desktop WebBrowser: image

But on MAUI / Android it looks similar to this:

image

the background image is not displayed.

jsuarezruiz commented 2 years ago

Testing with .NET MAUI 6.0.486 cannot reproduce the issue. Could you share more details like (the Android version, the manifiest properties etc)? image

TonyHenrique commented 2 years ago

@jsuarezruiz: Right now, I created a new MAUI app using Visual Studio 2022 Preview Version 17.4.0 Preview 2.0 Here it is: maui-android 6.0.486/6.0.400 VS 17.4.32912.340 The device is a HMD Global Nokia 5.3 (Android 11.0 - API 30)

image

image

Added: <WebView Source="https://maui20220216.azurewebsites.net/test.html" />

But the background imager does not appear. If I open that URL (https://maui20220216.azurewebsites.net/test.html) on the WebBrowser the background image is displayed: WhatsApp Image 2022-09-15 at 12 10 15

TonyHenrique commented 2 years ago

Below is attached that repro .sln that I created, displayed on the picture above: MauiApp-4733.zip

vhugogarcia commented 2 years ago

Hello @TonyHenrique , I'm unable to reproduce the issue on the emulators at Android.

Could you try adding a WidthRequest and HeightRequest to the Webview? please. <WebView Source="https://maui20220216.azurewebsites.net/test.html" HeightRequest="500" WidthRequest="800" />

image
TonyHenrique commented 2 years ago

@vhugogarcia , can you try it on a real device? Now I tried this on the real device, a HMD Global Nokia 5.3 (Android 11.0 - API 30):

<WebView Source="https://maui20220216.azurewebsites.net/test.html" HeightRequest="800" WidthRequest="350" />

And this is the result, no background image: IMG_1779

TonyHenrique commented 2 years ago

Hey! I checked now with maui-android version 7.0.0-rc.1.6683/7.0.100-rc.1 on the real device and the background image is being displayed!

image

TomCJones commented 2 years ago

i can get it on android, but not on iphone

TonyHenrique commented 2 years ago

@TomCJones can you add what is displayed when running:

dotnet workload list

TomCJones commented 2 years ago

The displays on android and iPhone are identical, except that the background image is missing on iPhone, Here is the XAML for that

PM> dotnet workload list Welcome to .NET 6.0! --------------------- SDK Version: 6.0.401 -------------------------------------------------------------------------------------- Installed Workload Ids Manifest Version Installation Source --------------------------------------------------------------------------------------------- maui-windows 6.0.486/6.0.400 VS 17.3.32901.215 maui-maccatalyst 6.0.486/6.0.400 VS 17.3.32901.215 maccatalyst 15.4.446-ci.-release-6-0-4xx.446/6.0.400 VS 17.3.32901.215 maui-ios 6.0.486/6.0.400 VS 17.3.32901.215 ios 15.4.446-ci.-release-6-0-4xx.446/6.0.400 VS 17.3.32901.215 maui-android 6.0.486/6.0.400 VS 17.3.32901.215 android 32.0.448/6.0.400 VS 17.3.32901.215 Use `dotnet workload search` to find additional workloads to install.
TomCJones commented 2 years ago

i have the simplest possible repro - install fresh VS 17.3.5 - create maui app for android & ios - change color on appicon (in both the svg and the csproj) the color changes on android and not on ios.

ghost commented 2 years ago

Hello lovely human, thank you for your comment on this issue. Because this issue has been closed for a period of time, please strongly consider opening a new issue linking to this issue instead to ensure better visibility of your comment. Thank you!