Блог

У нас есть следующий код, добавляющий высоту безопасной области к нижней панели инструментов, чтобы домашняя панель iOS не отображалась поверх значков нижней панели инструментов.

 /* 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);
    }
}
  

Это работает нормально, пока мы не нажмем значок масштабирования текста Safari в формате Aa и не выберем масштабирование 75% или меньше.

В этом случае все (изображения / текст) на странице становится меньше, но это не влияет на значение переменной safe-area-inset-bottom . В результате домашняя панель закрывает нижнюю панель инструментов.

Является ли это недостатком переменной safe-area-inset-bottom?

Если да, есть ли обходной путь?