search

Freegle / iznik-nuxt3

This is the new version of the client code. The iznik-nuxt repository is now historical (for www.ilovefreegle.org) but still used for moderator tools.
https://iznik-nuxt3.vercel.app
GNU General Public License v2.0
7 stars 4 forks source link

fix: mobile navbar content overlap #66

Closed untael closed 8 months ago

untael commented 10 months ago

An issue was that mobile navbar overlapped page content when comes back after a delay. It has been fixed by shift effect.

You can reproduce this bug by exposing host when you run npm run dev.

Closes #65

netlify[bot] commented 10 months ago

Deploy Preview for golden-caramel-d2c3a7 ready!

Name Link
Latest commit bcbb1410af3f48301876f92687892f51123ebe57
Latest deploy log https://app.netlify.com/sites/golden-caramel-d2c3a7/deploys/65a9bd2edb49820008e4f7e8
Deploy Preview https://deploy-preview-66--golden-caramel-d2c3a7.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

edwh commented 10 months ago

This is what I see on the preview deployment:

https://i.gyazo.com/c8fe1bb4bfeae8c2ef63c4c3a9d7d3aa.mp4

The navbar still slides back up covering the box I'm typing in.

untael commented 10 months ago

This is what I see on the preview deployment:

https://i.gyazo.com/c8fe1bb4bfeae8c2ef63c4c3a9d7d3aa.mp4

The navbar still slides back up covering the box I'm typing in.

Have you tried to reproduce that on real mobile device? In that case keyboard comes in and input field automatically shifts to user viewport.

edwh commented 10 months ago

Have you tried to reproduce that on real mobile device? In that case keyboard comes in and input field automatically shifts to user viewport.

Yes. I can get various kinds of overlapping behaviour, on my physical phone and also testing on Browserstack. For example:

https://i.gyazo.com/9c44af6c82f8c495c50ab26239c82e1f.mp4

untael commented 9 months ago

Have you tried to reproduce that on real mobile device? In that case keyboard comes in and input field automatically shifts to user viewport.

Yes. I can get various kinds of overlapping behaviour, on my physical phone and also testing on Browserstack. For example:

https://i.gyazo.com/9c44af6c82f8c495c50ab26239c82e1f.mp4

It doesn't seems that this issue can be fixed by shifting user scroll. Probably we can change the approach and do not move navbars back in case that Virtual Keyboard is visible?

edwh commented 9 months ago

I'll take this one back and carry on looking at it. Thanks.