Блог

Я знаю, что это слишком рано, но я использую Safari iOS 15, и в нем есть некоторые серьезные изменения в дизайне. В настоящее время я разрабатываю приложение next-redux для Интернета, в котором есть нижнее всплывающее окно, прикрепленное к нижней части окна просмотра.

Я контролирую его заполнение с помощью:

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

Поэтому, если в любом другом браузере, таком как Chrome или firefox, нет вставки, функция max() по умолчанию вернет 16 пикселей.

Если размер вставки превышает 16 пикселей, то есть нижняя вставка safari, она применяется вместо этого.

Но в новом safari возникли проблемы, и я прикрепляю изображения для справки.

На этом рисунке я хотел бы указать отступ из строки URL-адреса. 16 пикселей не применяется, что означает, что вставка должна сработать, но вставка явно равна 0

Каким может быть подход к этой ситуации

Теперь они снова переработали его для бета-версии iOS 15 6, и он больше не зависает над контентом.

Существует слишком много миллионов веб-сайтов, на которые повлияло бы предыдущее поведение.

Это не значит safe-area-inset-bottom , что это излишне, я считаю, что это все еще добавляет небольшое количество для индикатора главного экрана (панель внизу).

Это все еще очень сильно меняется, и я все еще вижу причуды в разных вещах.

Кроме того, теперь вы можете перейти в настройки и вернуть навигационную панель в верхнюю часть страницы — так что не забудьте протестировать свой дизайн и с этим. (В настоящее время это называется опцией «Одна вкладка»).

Если я чего-то не упускаю, мне кажется, что это работает так, как ожидалось. Если вы хотите расположить нижнее всплывающее окно на 16 пикселей выше нижней части env(safe-area-inset-bottom) или нижней части экрана (в зависимости от того, что больше), вам нужно добавить 16 пикселей в обоих случаях.

Я бы попробовал что-нибудь в этом роде…

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

Посмотрим, сработает ли это для вас.