Журнал
iOS 26 Safari

Цвета панели Safari в iOS 26

В iOS 26 Safari заметно иначе работает с цветом системной панели. theme-color больше не гарантирует ожидаемый результат: браузер чаще берёт цвет из реального фона страницы.

Для сайтов с аккуратной визуальной системой это важно. Неправильный фон даёт грязный toolbar, резкий overscroll и ощущение, что страница «не приклеена» к браузеру.

Что изменилось

Раньше можно было явно задать цвет:

<meta name="theme-color" content="#f6f1e8">

Теперь Safari чаще смотрит на CSS:

  1. фон body;
  2. fixed/sticky-элементы у краёв viewport;
  3. цвет секции, которая попадает под системную панель;
  4. системный fallback, если явного цвета нет.

Поэтому мета-тег остаётся полезным для других браузеров, но в iOS Safari уже не должен быть единственной точкой управления.

Что ломается в интерфейсах

Чаще всего проблемы видны в трёх местах:

  • верхняя панель берёт цвет прозрачного header;
  • нижняя панель в compact-режиме подхватывает цвет footer;
  • при SPA-навигации Safari на мгновение показывает цвет предыдущей страницы.

Если сайт меняет тему или фон через JavaScript после первого рендера, Safari может не пересчитать цвет панели сразу.

Как делать надёжнее

Держать body в правильном цвете

html,
body {
  background: #f6f1e8;
}

Фон body влияет не только на toolbar, но и на rubber-band overscroll. Если страница светлая, body тоже должен быть светлым.

Не делать header полностью прозрачным

Прозрачный fixed-header отдаёт решение Safari. Лучше задавать явный фон или проектировать первый экран так, чтобы цвет под header всегда был ожидаемым.

.site-header {
  position: fixed;
  top: 0;
  background: #f6f1e8;
}

Если нужен визуально лёгкий header, можно оставить прозрачность только там, где она не конфликтует с системной панелью.

Проверять низ страницы

В compact tab bar Safari может брать цвет снизу viewport. Поэтому footer и последние секции должны быть осознанными: либо тот же фон, либо контрастный блок, который нормально выглядит рядом с системной панелью.

Правило для проекта

Сначала задаём корректный CSS-фон для html, body, wrapper и fixed-элементов. Потом добавляем theme-color как дополнительный сигнал, а не как главный механизм.

Так сайт ведёт себя стабильнее: Safari получает понятный цвет из layout, а не угадывает его по случайной прозрачности или предыдущему состоянию SPA.