What is the new safe-area-inset approach from iOS 15 Safari CSS?

user_15651616 0
Viewed 6414

I know its too soon, but I've been using the iOS 15 Safari and it has some major design changes. I'm currently developing a next-redux application for web which has a bottom popup that is fixed to the bottom of the viewport.

I'm controlling its padding with:

.action-bar-container{
    position: sticky;
    bottom:max(16px, env(safe-area-inset-bottom));
}

So if its any other browser like Chrome or firefox which doesn't have any inset, the max() function would return 16px as default.

If the inset is larger than 16px, i.e. safari bottom inset, it applies instead.

But the new safari has been giving issues, which I'm attaching images for reference.

In this pic, I would like to provide a padding from the url bar. The 16px is not being applied which means the inset is supposed to kick in, but the inset is clearly 0 The problem

What could be the approach to this situation

reactjs css
2 Answers

They've now redesigned it again for iOS 15 Beta 6 and it no longer hovers over the content.

There are just too many millions of websites the previous behavior would interfere with.

That doesn't mean safe-area-inset-bottom is redundant, I believe it still adds a small amount for the home screen indicator (the bar at the bottom).

It's still very much in flux and I'm still seeing quirkiness with various things.

Also you can now go to settings and put the nav bar back at the top of the page - so be sure to test your design with that too. (This is currently called 'Single Tab' option).

Simon_169400

Unless I'm missing something it looks to me like that is performing as expected. If you want to position your bottom popup 16px above the bottom of the env(safe-area-inset-bottom) or bottom of screen (whichever is greater) you need to add the 16px in both cases.

I would try something like...

.action-bar-container{
    position: sticky;
    bottom:calc(env(safe-area-inset-bottom) + 16px);
}

See if that works for you.

user_45284020
Related