Doesn't fit in portrait mode iOS Safari

[simondell]

When a site or web app using a <AutoRotatingCarousel> is viewed through Safari iOS, held in portrait orientation, the <Slide>s bleed out of the edges of the screen. Most significantly, the call to action button at the bottom becomes obscured by Safari's footer.

When the same site/app is launched from the home screen, or (I assume) in a WebView in a native/hybrid app, then the carousel fills a portrait aspect screen nicely. These methods of launching/displaying an app prevent Safari's header/footer appearing.

[leMaik]

Thanks for reporting this! Sounds like Safari doesn't play nicely with width and height being 100% and position: fixed.

I'll take a closer look as soon as I get access to an iPhone (next week).

[simondell]

Thanks. I'm having a look for a solution too. I'll PR if I find one.

[leMaik]

@simondell Could you try setting the width here to 100vw and the height to 100vh?

[simondell]

I failed to get 100vw/100vh working.

This well researched article suggests both reasons why I/we see the error and also that vw/vh will not fix the problem. I'm looking into alternatives.

[leMaik]

Thanks for the link! :+1: The article basically says that the "bug" is intended and won't be fixed. So… I'm interested in how to fix this.

[simondell]

That was my interpretation as well. I tried your 100vw/100vh suggestion. I also tried position: fixed; top: 0; right: 0; bottom: 0; left: 0; but that appeared the same as the other two (unsurprisingly). I'm similarly unsure what to attempt next (without changing the design). For our own app I have created a fork and pulled the call to action up using a greater negative margin... but this is a hack to help meet a deadline and not a sharable fix.

[leMaik]

Well, at least it's a fix. :wink: Thanks for your investigation anyway. I'll take a closer look at this issue later.

[Koerner]

Hi, I have the exact same issue with Safari on iOS. Are there any updates about this?

What I did so far: contentStyle={safariStyle.container} const safariStyle = { container: { marginTop: -44 }, } But now I have this margin on non-IOS devices. Any idea how I can fix this? Thanks

[leMaik]

@Koerner Still not fixed, unfortunately.

Does it work with position: 'fixed', top: 0, left: 0, width: '100%', height: '100%'? That's what material-ui uses for the backdrop of the dialog (which is full-screen and should work properly even on Safari) :thinking:

[Koerner]

Nope, I just tried it. But for iOS that doesn't change anything.

Is there a way to color the 44px in the color of the (changing) slider background-color?