Modals don't play well with safari on iOS

[chmac]

Here's what it's mean to to look like:

But here's what it often looks like:

Note the bottom bar which changes size. It's a bit tricky on iOS because the viewport height changes. Trouble is, the modal often opens in the second state where the X in the top left is off the screen. Given that the whole thing doesn't scroll, it's not reachable. The only way to escape the view is by hiding the toolbar at the bottom. But that's a pretty advanced level move, I'd assume that most regular humans would just get stuck here and have to reload the whole page. Bit of a nasty UX bug, and unfortunately I'm not 100% sure what the solution is. I'd guess there's probably some libraries that handle this, or maybe it needs a resize event handler to resize the modal. Or maybe there's an easy way to make the modal always ~50px shorter than the viewport?

[cryptoboid]

Hmm, that's weird. From what I've noticed, it also does weird stuff with the Firefox URL bar on mobile (Android). That's mostly coming from the UI library SMUI. Does this same behavior happen in the demo pages from SMUI? https://sveltematerialui.com/demo/dialog (fullscreen dialog demo is almost at the bottom)

[chmac]

Hmm, that's weird. From what I've noticed, it also does weird stuff with the Firefox URL bar on mobile (Android). That's mostly coming from the UI library SMUI. Does this same behavior happen in the demo pages from SMUI? https://sveltematerialui.com/demo/dialog (fullscreen dialog demo is almost at the bottom)

That demo appears to work as expected on mobile. But the modal in the screenshots is not, if I remember correctly, a full screen modal. We've finished our trip and so we're not actively using splitio any more. I can't figure out how to recreate that modal screenshot off the top of my head any more unfortunately.

[cryptoboid]

The balances dialog is fullscreen, but SMUI shows these as such only on mobile, not desktop. I can't seem to find the culprit really, maybe I should make some test projects and submit an issue to SMUI directly. :(

[chmac]

Ah, sorry, right, now I realise what this issue was all about. It's the X top left that's hidden. I was mislead by my own blacking out in the screenshots! 🙈

Okay, looking at this again, the demo modal works exactly right, but the Balances modal doesn't. Now that I filled the box with more content (I added 12 dummy users), I still have the same behaviour. The heading "Balances" behaves just like the "Terms and Conditions" header on the demo. The most obvious difference is that the demo modal also has a bottom bar, while the Balances modal does not.

A quick & dirty workaround would be to add a "Close" button to the bottom of the modal, which should always be visible, even on iOS.

Otherwise, could it be a version issue?

Or, maybe there's some javascript missing on splitio? I've seen this type of issue in UI frameworks where some redraws have to be triggered by javascript, so if you're loading just the CSS from the framework that's not enough. I don't know enough about Svelte to know if that could be an issue here or not. I'm thinking of something like the bootstrap days, where you need to include both bootstrap.min.css and bootstrap.min.js and if you miss the .js then some parts won't work.

Otherwise, I'm out of ideas!

[cryptoboid]

The heading "Balances" behaves just like the "Terms and Conditions" header on the demo. The most obvious difference is that the demo modal also has a bottom bar, while the Balances modal does not.

Do you mean that the demo also has the top title hidden/bugged? In that case that's a relief 😅 Or maybe I'm misunderstanding something. If it works well with a bottom "Close" button that seems like the simplest fix, will add it then