Chrome автоматически скролит вниз страницы

Chome — мой основной браузер и не так давно я столкнулся со странным поведением в этом браузере.

Введение

На главной странице моего блога имеется masonry сетка из 9 карточек и кнопка «Загрузить еще». По нажатию кнопки через ajax добавляется еще 9 карточек.

Странность заключается в том, что chrome после подгрузки карточек оставляет кнопку «Загрузить еще» на той же позиции экрана, что и до загрузки. На малых разрешениямх экрана (когда 9 карточек не влазят в экран) после подгрузки видно только 2–3 последние карточки и требуется скролить наверх, чтобы посмотреть остальные.

Сперва я перепроверил свой код, ошибок не нашёл. Проверил в ie и firefox, в них работает как надо: после загрузки карточек видно первые 2–3 (а не последние). Я подумал, что это баг хрома.

Но это не баг, это фича!

Оказалось, что это Scroll Anchoring — привязка экрана к положению прокрутки, чтобы предотвратить видимые скачки, когда допустим сверху страницы подгружаются картинки. Экспериментальная функция была представлена в Chrome 51 и включена по-умолчанию в Chrome 56.

Вместо тысячи слов

Без Scroll Anchoring:

С Scroll Anchoring:

Сделать как было раньше

Следует добавить CSS свойство к прокручиваемому контейнеру

overflow-anchor: none

Похожие записи

Кратко о внедрение зависимостей и сервис контейнере

Cтатья о том, что такое "Внедрение зависимостей" и "Сервис-контейнер" отталкиваясь от их реализации в PHP фреймворках. Статья написана по мотивам статей Фабьена Потенсье, ведущиго разработчика и идеолога фреймворка Symfony, а также документации фреймворка Laravel.

TLDR

tldr - man в сокращенном изложении)