iOS Safari modal placement

[qruz-hq]

Current Behavior

As seen on the image the modal get hidden on the new safari UI because the page height is unchanged (the search bar just get overlayed). Would be cool to have a way to keep the modal centered even on mobile.

Expected Behavior

No response

Steps To Reproduce

1. Go to https://redlion.red on mobile (safari iOS)
2. Don't scroll
3. Click the red connect wallet button

What package is effected by this issue?

@web3-onboard/core

Is this a build or a runtime issue?

Runtime

Package Version

2.9.1-alpha.2

Node Version

No response

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Anything else?

No response

Sanity Check

• If this is a build issue, I have included my build config. If this is a runtime issue, I have included reproduction steps and/or a Minimal, Reproducible Example.

[Adamj1232]

@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

[Adamj1232]

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

[Adamj1232]

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

[Adamj1232]

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

[Adamj1232]

@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.

[qruz-hq]

@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.

[Adamj1232]

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?

[Adamj1232]

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.

[dev-stark-017]

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

[qruz-hq]

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.

[qruz-hq]

Can we reopen this pls 🙇