title: Safe area insets (e.g. safe-area-inset-bottom) ignore Safari 'Aa' zoom level?
body: <p>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.</p>
  <pre><code>/* 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);
      }
  }
  </code></pre>
  <p>It works fine until we click Safari's <strong>Aa</strong> text zoom icon and choose 75% zoom or less.</p>
  <p>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.</p>
  <p>Is that a weakness in the safe-area-inset-bottom variable?</p>
  <p>If so, is there a work-around?</p>