search

bitfoundation / bitplatform

Build all of your apps using what you already know and love ❤️
https://bitplatform.dev
MIT License
1.04k stars 216 forks source link

Admin Template: Menu does not open intermittent in Blazor Server Mode and IOS Safari #7784

Closed techscx closed 1 week ago

techscx commented 2 weeks ago

Is there an existing issue for this?

Describe the bug

Only in Blazor Server RenderMode and when opening with IOS Safari: After some time, the Burger Menu will not open the Menu or the input fields e.g. on profile page become unresonsive as well. The problem may arise only after some clicks and after entering some random keystrockes into a field on the profile page without the need of saving data.

When hosting as WebAssembly or Maui Blazor Hybrid RenderMode , there is no such issue. Still within IOS, when using any other Browser like Chrome, Edge, Safari and Opera, the issue does not exist. Is is solely an Issue with IOS & Safari & Server Rendering.

The problem only comes up with pages which have at least one EditForm with at least one Input component like the InputText. The result is the same using bit components or the standard Asp.Net Blazor InputText component.

Expected Behavior

Menu and input fields are expected to be responsive.

Steps To Reproduce

Setup:

Variant 1)

Variant 2)

Variant 3) Further tips to eventually reproduce the problem:

Note: In case the issue is reproduced, it can be seen that the IOS Safari Client does not fire any Server-Action. e.g. Header.razor.cs->ToggleMenu is not called. So it looks like that just the ISO Safari client does not react on user input and thus the call to open the Burger Menu is not performed.

Exceptions (if any)

No exception is thrown at all. Blazor Server:

.NET Version

8.0.301

Anything else?

No response

msynk commented 2 weeks ago

@techscx Thanks for contacting us. We're investigating this issue. We'll let you know if it's possible to work on this issue.

techscx commented 2 weeks ago

Hello, thank you for your quick response!

More ideas to reproduce the problem (I have added this steps to the initial post):

The problem only comes up with pages which have at least one EditForm with at least one Input component like the InputText. The result is the same using bit components or the standard Asp.Net Blazor InputText component.

techscx commented 2 weeks ago

To add (short notice, has to be prooven on longer tests the next days):

It looks like I have found one reason for the issue: Once, I place another Burger-Menu Button on the right of the Header, the Method is invoked every time correctly from there.

So, my assumption is: On IOS Safari, the NavMenu Component is not always correctly completely removed via the applied css segment part ".main-container--closed...display: none". It is not visible, but somehow seems to block the underlying area of the Header Component and thus, the Burger-Menu button cannot be reached again to invoke the process of unhiding the Menu again.

msynk commented 2 weeks ago

@techscx Thanks for the extra information. We are investigating this problem, but in our initial tests, we couldn't reproduce this problem. We are trying the new information you've provided to try to see the same issue.

techscx commented 2 weeks ago

@techscx Thanks for the extra information. We are investigating this problem, but in our initial tests, we couldn't reproduce this problem. We are trying the new information you've provided to try to see the same issue. Just a reminder: It is crucial to host the Template as Server-rendered (I have forced the Rendemode to that on Release Configuration as well) and to access through IOS & Safari.

msynk commented 2 weeks ago

@techscx we couldn't find the problem in our investigations. could you please provide a screenshot or a screen record of this issue?

techscx commented 2 weeks ago

@techscx we couldn't find the problem in our investigations. could you please provide a screenshot or a screen record of this issue?

I will prepare a host for you to evaluate the behaviour.

techscx commented 2 weeks ago

I have prepared a screen capture from IOS-Safari (iphone). The host is rendering (IComponentRenderMode Current = BlazorServer).

https://github.com/bitfoundation/bitplatform/assets/71921910/d6ba37ed-3668-4733-97f4-228773e367dc

To add:

msynk commented 2 weeks ago

@techscx Thanks for the new information. We will continue our investigations with the information you gave us.

msynk commented 2 weeks ago

@techscx Are you experiencing this problem anywhere other than the dev tunnels?

for example in a GitHub Codespace, on a simulator, or even in a published app?

techscx commented 2 weeks ago

@techscx Are you experiencing this problem anywhere other than the dev tunnels?

for example in a GitHub Codespace, on a simulator, or even in a published app?

Yes, as described the problem only exists with IOS and Safari but not with IOS and any other browser. It can be seen as well once published on IIS without Visual Studio and/or devtunnel.

In any other case, thus WASM on the web or as hybrid in Maui, there is no issue.

If I olace another button at the top right corner in the Header, it is reachable and works as expectes from there.

ysmoradi commented 2 weeks ago

hello, You can easily have public version of our project template running in blazor server mode by following these instructions I did the same and then I tested on iOS 15 (iPhone 6S) and saw no issue. Could you please check the same? Could you please let me know the iOS version you're testing on? Note that we don't recommend blazor server in production, kindly let me know why you're trying to use that in your production publish? @techscx

mhrastegari commented 2 weeks ago

Hello there, I tested the app in VS Dev Tunnel and GitHub Codespaces with my iOS 17.5 device, and the only thing I found in both of them was how slow it was on Blazor Server. But it worked just well in the local network. I advise you to give it a shot as well to see whether the issue persists. Here's where you can get instructions on using your local network to test the app on your phone:

How can I access my localhost from my Android device? - Stack Overflow

https://github.com/bitfoundation/bitplatform/assets/42671084/acc47ad1-649b-4098-9b3a-5f94621018aa

techscx commented 2 weeks ago

hello,

You can easily have public version of our project template running in blazor server mode by following these instructions

I did the same and then I tested on iOS 15 (iPhone 6S) and saw no issue.

Could you please check the same?

Could you please let me know the iOS version you're testing on?

Note that we don't recommend blazor server in production, kindly let me know why you're trying to use that in your production publish? @techscx

Hello,

thank you! I know, that the menu issue does not necessarily be present in the first place and thus hard to debug. Once, I started implementing editforms with at least one input element, it started spontaneously to be unable to rech the menu.

The tests were done on multiple IOS devices (iphone, ipad) with version 17.5.1.

I understand that WASM is the recommended publishing render mode. But i always test the server mode as well since it was a valid fallback if there goes anything wrong with WASM. For instance, I have caching problems with browsers not loading the latest WASM binaries until manually deleting the cache. And, as soon as I find any issue I have to assure, that there is not a more significant issue under the hood of my whole implementation.

Thank you all so much for your efforts in this. Fortunately it is possible to hide/unhide the menu by re-rendering while keeping the style. So from my side there is no pressure in tracing down further.

I will prepare an official endpoint for you to test these next days.

techscx commented 2 weeks ago

Hello there,

I tested the app in VS Dev Tunnel and GitHub Codespaces with my iOS 17.5 device, and the only thing I found in both of them was how slow it was on Blazor Server.

But it worked just well in the local network. I advise you to give it a shot as well to see whether the issue persists.

Here's where you can get instructions on using your local network to test the app on your phone:

How can I access my localhost from my Android device? - Stack Overflow

https://github.com/bitfoundation/bitplatform/assets/42671084/acc47ad1-649b-4098-9b3a-5f94621018aa

Hello there, thank you!

I will test this scenario as well and keep you informed these days.

msynk commented 2 weeks ago

@techscx Since you're using the devtunnels in the video you've posted, there is a possibility that the slow connection causes this issue. We strongly recommend testing the app on the local network to make sure the problem exists in the app.

techscx commented 2 weeks ago

@techscx Since you're using the devtunnels in the video you've posted, there is a possibility that the slow connection causes this issue.

We strongly recommend testing the app on the local network to make sure the problem exists in the app.

Hello, I have the same behavior on the fully published site on a high performance server. The devtunnel is not in use here and was just another example for the same behavior on my side. I understand that it seems not be possible to reproduce this on your side and I will prepare an official published endpoint incl. source code.

techscx commented 1 week ago

Update: I am stil trying to deliver a consistent setup in order to allow the behaviour to be easily reproduced.

Still, after wrapping the menu completely in a if-clause, whether it should be visible or not, I still get sometimes no menu-open invocation from the header. The emer-button on the right side is working any time. All this only in IOS-Safari. And right now I am getting the same behaviour in WASM mode as well. If I open the same site split screen Safari/Chrome one can see that Chrome is working as expected, while Safari is not. The maui-hybrid app in IOS works still correctly.

ysmoradi commented 1 week ago

adminpanel is hosted in blazor wasm mode, do you face the issue there as well? On which version of safari?

techscx commented 1 week ago

The devices are all at IOS 17.5.1 with the delivered Safari bound to the OS. With your deployed adminpanel the issue comes up very rare after high number of clicks, navigation changes and form field selections. On my implementation I have the issue sometimes instantly and sometimes only after some time as well. But yes, I get the issue on you published sample at https://adminpanel.bitplatform.dev/ as well after some time and really hard to reproduce there..

techscx commented 1 week ago

I have testet your official admin panel also in IOS simulators. At least with a simulated iphone 15 pro max I was able to reproduce it:

Yes, this is a very special procedure. I have this issue in several other situations (without the need of changing the display orientation) which I'm unable to reproduce. But all of them may eventually link together.

msynk commented 1 week ago

@techscx Thanks for the new information. I've tested your scenario and can confirm that this issue exists on Safari on iOS. This issue comes from the auto zoom feature of the safari when you focus an input and after the on-screen keyboard opens up. to disable this auto-zoom feature we can simply add maximum-scale=1.0 to the viewport meta tag in the App.razor file (as we already did in the index.html file of the MAUI project). I'm going to apply this change so we can both test the result.

msynk commented 1 week ago

The issue is accepted and planned. Resolving it will start ASAP.

msynk commented 1 week ago

Resolving this issue has started. It will be announced when this issue is resolved.

msynk commented 1 week ago

I've added the missing attributes and tested the app again, and it seems the issue is resovled.

msynk commented 1 week ago

This issue has been resolved and it will be available in the next pre-release version. It will be announced when the pre-release becomes ready.

ysmoradi commented 1 week ago

Could you please check adminpanel again? @techscx

techscx commented 1 week ago

Hello, I did a short test and it works now. I will do further tests on other devices in order to get more confident experience. And I hope that this change will solve my menu-problem in all other cases as well. Thank you!

Could you please check adminpanel again? @techscx