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

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?

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