⁣CSS anchor() и anchor-scope: тултипы перестают слетать при скролле

Тултип с position: fixed всегда привязан к окну браузера, а не к родительскому контейнеру с overflow: auto. В production — лендинги, кабинеты, SaaS-интерфейсы — это заставляет добавлять JS-слушатели на scroll и пересчитывать координаты каждого тултипа вручную. Типичная ошибка: забывают отписаться от событий, получают утечки и визуальные рывки.

Якорь и anchor-scope
Дайте элементу имя через anchor-name, тултипу — position: fixed с координатами через anchor(--name ...). Контейнеру со скроллом добавьте anchor-scope: all. Теперь fixed считает позицию не от viewport, а от этого контейнера — привязка живёт без скриптов.

Пример production-кода

.scroll-container {
  anchor-scope: all;
  overflow: auto;
  height: 400px;
}
.trigger { anchor-name: --tooltip-anchor; }
.tooltip {
  position: fixed;
  bottom: anchor(--tooltip-anchor top);
  left: anchor(--tooltip-anchor right);
}

Без anchor-scope тултип улетал бы при скролле. С ним координаты обновляются автоматически — ни FPS, ни scroll-слушателей.

Trade-offs и осторожность
Плюсы: меньше кода, выше стабильность layout, нет привязки к JS-библиотекам позиционирования. Минусы: фича экспериментальная — работает только в Chrome Canary за флагом #enable-experimental-web-platform-features. Синтаксис могут поменять, поэтому пока — только для прототипов. Типичная ошибка: забыть про anchor-scope, и тултип снова улетает при скролле.

Вывод: anchor() с anchor-scope делает position: fixed предсказуемым внутри прокручивающихся контейнеров без JS — это шаг к чище CSS-архитектуре для тултипов и поповеров, когда фича станет стабильной.