Safe area insets (e.g. safe-area-inset-bottom) ignore Safari ‘Aa’ zoom level?

Published

We have the following code adding safe area height to a bottom toolbar so the iOS home bar doesn’t appear over the top of the bottom toolbar icons.

/* Extra bottom padding for iPhoneX and iPad Pro Home bar */
@supports (padding: constant(safe-area-inset-bottom)) 
{  
    .dvFooterContainer1 
    {   
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        height: calc(var(--safe-area-inset-bottom) + 56px);
    }
}

@supports (padding: env(safe-area-inset-bottom)) 
{ 
    .dvFooterContainer1 
    {   
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        height: calc(var(--safe-area-inset-bottom) + 56px);
    }
}

It works fine until we click Safari’s Aa text zoom icon and choose 75% zoom or less.

In that case it makes everything (images/text) on the page smaller but it doesn’t affect the value of the safe-area-inset-bottom variable. As a result, the home bar obscures the bottom toolbar.

Is that a weakness in the safe-area-inset-bottom variable?

If so, is there a work-around?

Source: Ios Questions

Published
Categorised as css, ios, javascript, safari, webkit Tagged , , , ,

Answers

Leave a Reply

Your email address will not be published. Required fields are marked *

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq