search

Magickbase / nervos-official-website

nervos.org
https://nervos-official-website.vercel.app/
3 stars 16 forks source link

fix: can't open menu on physical mobile device #256

Closed zhangyouxin closed 1 year ago

zhangyouxin commented 1 year ago

Description

Resolve: https://github.com/Magickbase/nervos-official-website/issues/249

The bug only exists on physical mobile devices, the panel works well on desktop browsers whether in desktop mode or mobile mode.

After debugging, I found that the reason could be brought by the incompatibility of healessui, the Popover component is not working somehow.

I resolved this issue by taking control of the Menu Popup manually, the states and functions of opening and closing the panel, and the overlay layer.

Please test on a real mobile device.

vercel[bot] commented 1 year ago

@zhangyouxin is attempting to deploy a commit to the Magickbase Team on Vercel.

A member of the Team first needs to authorize it.

vercel[bot] commented 1 year ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
nervos-official-website ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 27, 2023 0:40am
Keith-CY commented 1 year ago

The fix doesn't work on my phone

https://github.com/Magickbase/nervos-official-website/assets/7271329/fb8da51f-5f0c-4cd2-b969-fc399eb34750

zhangyouxin commented 1 year ago

The fix doesn't work on my phone

RPReplay_Final1689845866.MP4

weird, It worked on my phone, but now it doesn't, seems that the reason is not Popover... I'm continue debugging work...

zhangyouxin commented 1 year ago

Found that commenting Footer on Home page will fix problem:

image

I'm trying to find out more details

zhangyouxin commented 1 year ago

Please take look at the preview page here, @Keith-CY @WhiteMinds

Now that the Menu can popup on iphone, but the links on popup won't work because the navigation function has been disabled: https://github.com/Magickbase/nervos-official-website/pull/256/files#diff-cd77406678830288c943f9ad846c1cf65510a7ee5cfb08e7979c83f8f915fe60R65

By uncommenting the onClick attribute will restore navigation functionality, but original Menu problem arises.

To be more precise, the popover can pop out when double-click on iphone rather than won't pop up at all.

So that the conclusion for now is: when clickable elements(a tag or div tag with a onClick handler) is used along with swiperjs, iphone user needs to double click on menu button to open menu.

After spending two days debugging this and I didn't find the real reason for the incompability of iphone.

I also tried to upgrade swiper to the latest version 10.0.4, didn't work though.

If this problem needs to be solved for good, I think I will try replacing swiperjs with other swipe lib, and that may take more time.

zhangyouxin commented 1 year ago

It suddenly come to me that maybe I can try take "Footer" section out of "Swiper" area.

Keith-CY commented 1 year ago

Weird case that cannot be reproduced in a new tab

https://github.com/Magickbase/nervos-official-website/assets/7271329/6561564a-c87d-47fb-b196-b19dc67c4cd0