iOS Safari modal placement about web3-onboard HOT 11 OPEN

hi, same issue with chrome ios 17 in in iphone 14

from web3-onboard.

@qruz-hq Im not sure why your app isn't displaying your site as a mobile app but the web3-onboard connect modal should look like this on mobile.

You can give our app a test at reactdemo.blocknative.com or here and see the codebase here - https://github.com/blocknative/react-demo

from web3-onboard.

Can you send a full list of all of you web3-onboard package versions and a reproducible example or codebase?

from web3-onboard.

@qruz-hq friendly ping on the above notes and request

from web3-onboard.

Hi @qruz-hq friendly ping on the above questions. Would love to help get you squared away if possible.

from web3-onboard.

@qruz-hq we are going to go ahead and close this issue because of lack of response. Please feel free to continue the conversation if the problem persists.

from web3-onboard.

@qruz-hq Im not sure why your app isn't displaying your site as a mobile app but the web3-onboard connect modal should look like this on mobile.

You can give our app a test at reactdemo.blocknative.com or here and see the codebase here - https://github.com/blocknative/react-demo

Hey sorry I was out for a moment. This is the full modal, with the option sidebar: true. I don't really like the sidebar but will enable it for now as a "quick fix" but this is still an issue. The modal should be centered, or at least have an option to make it centered.

from web3-onboard.

We don't display a modal on mobile. On mobile it should always look like the image above. Are you saying on mobile setting sidebar to true causes a modal to display within your app?

from web3-onboard.

Can you send over your onboard initialization configuration?I am testing this our now and even with W3OInit.connect.showSidebar = false I am not seeing the issue you are within your app.

from web3-onboard.

We don't display a modal on mobile. On mobile it should always look like the image above. Are you saying on mobile setting sidebar to true causes a modal to display within your app?

This isn't a "mobile" issue in itself, it's a iOS Safari (and maybe other browsers) issue. There's no way of fixing this because the page height doesn't change when you scroll up on the page, that's just how the Safari development team made their app I guess. Using a fixed element with a bottom: 0; position won't work.

The way Safari works is when you scroll down the URL bar disappears and it reappears when you scroll up. It visually reduces the viewport height but it keeps the same px value. Hence why it gets hidden.

from web3-onboard.

Can we reopen this pls 🙇

from web3-onboard.