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.24k stars 1.76k forks source link

.Net Maui Blazor Hybrid has an issue with iOS Screen when you double click a button #22555

Open sardar97 opened 5 months ago

sardar97 commented 5 months ago

Description

when I start just using default template maui blazor hybrid and run it on iOS I have this issue. when I double click on Click Me button to increment the counter on the Counter page the iPhone screen goes down I explain it more in this video :

https://github.com/dotnet/maui/assets/96167344/6808688f-028e-4d79-9bc4-c196bc0bc985

Steps to Reproduce

No response

Link to public reproduction project repository

No response

Version with bug

8.0.3 GA

Is this a regression from previous behavior?

Yes, this used to work in .NET MAUI

Last version that worked well

8.0.3 GA

Affected platforms

iOS

Affected platform versions

iOS 17.5

Did you find any workaround?

No response

Relevant log output

No response

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:

Closed similar issues:

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

Felix-Dev commented 5 months ago

We are also facing this issue in our Blazor Hybrid page (MAUI page scrolls down when double-clicking a html button inside a BlazorWebView).

sardar97 commented 5 months ago

so can I fix it manually or I have to wait till you fix it in an update ?

Zhanglirong-Winnie commented 5 months ago

Verified this issue with Visual Studio 17.10 Preview 7 (8.0.40 & 8.0.3 ) & 17.6.12(Build410). Can repro on iOS(17.5&17.2) platform. This issue works fine on iOS 17.0.

hufsa commented 2 months ago

Even double clicking just below the ”Hello World” text on the home page causes this.

florianwachs commented 2 months ago

Hi, I discovered this issue while working through the awesome blazor hybrid workshop of @jfversluis .

Via trial and error I found something that worked for me and maybe does for you.

I had to change the meta tag in index.html to the following:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

(notice that the viewport-fit=cover got removed)

This change alone now works for me. If it it is not working for you, on my way to this solution I found that the following css at least reduced the problem for me.

html, body, * {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

Please don't ask me why I had to include html and body if there is *, but it didnt work without it...

So I hope it works for you too!

My gut feeling is that it is basically a double tap to zoom "problem". Maybe a better solution is to somehow modify the MAUI handler for the underlying webview but I am not far enough (yet) on my MAUI learning journey to do that :-)

mkArtakMSFT commented 1 month ago

Thanks for sharing that, @florianwachs! We'll backlog this issue for now as the proposed solution seems to be caused by the OS behavior which is controllable through configuration similar to what you shared.

Felix-Dev commented 1 month ago

@florianwachs

I can confirm that your fix

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

also works for us. Thanks a lot!