Почему в браузере google chrome добавленные элементы в блок уезжают наверх, когда в mozilla firefox уходят вниз?

Question

[iskander_velikiy]

Вопрос: Когда добавляю новые узлы DOM в некоторый блок, то браузеры ведут себя по разному. В Firefox добавленные элементы уходят вниз и утаскивают с собой кнопку, когда в google chrome кнопка остаётся на месте, а вот новые элементы уезжают наверх, что на мой взгляд крайне неудобно...
Подскажите, что вы делаете в таком случае?
https://jsfiddle.net/uchenik/89mzd2yo/8/

Comments

[Виктор]

Кое-где обсуждался этот вопрос. Из обсуждения я узнал, что в разных браузерах и на разных сайтах это по-разному, а первопричиной послужило некое обновление Win10.
Там ещё спорили, как это дело скомпенсировать - то ли переписать сайты, неправильно отрабатывающие команду, то ли найти баг в Windows (точнее, ждать, когда его найдёт и исправит MS).

[Виктор]

wisgest, форумные обсуждения - штука недолговечная, зачастую они спадают уже на следующий день. Так вот, там не обсуждали кучу мелочей, о которых вы спрашиваете. Там всего лишь обратили внимание, что упомянутые проблемы начались с приходом очередного обновления. И всё.
Правы они или нет? Желающие пусть проверяют.

Answer 1

[Юрий]

Это чудесное изобретение гугла называется Scroll anchoring. Чтобы отключить, добавьте в CSS:

body {
  overflow-anchor: none;
}

Comments

[Максим Морев]

"Да эту верстку за неделю можно выучить" - говорили они.
Шёл тринадцатый год в профессии - всё ещё что-то новое узнаю.
Несколько компонентов с псевдобесконечной прокруткой можно сделать лучше.
Спасибо, респект :)

[iskander_velikiy]

Юрий, спасибо большое за ваш ответ. Это действительно самый простой способ. Хотел еще было ссылку переносить в конец добавленных элементов, но оказалось куда всё проще