Добавленные элементы в браузере chrome уходят наверх, в firefox уходят вниз. Как сделать одинаково?

Question

Когда добавляю новые узлы DOM в некоторый блок, то браузеры ведут себя по разному. В Firefox добавленные элементы уходят вниз вместе с кнопкой, а вот в google chrome кнопка остаётся на месте, а новые элементы уезжают наверх, что на мой взгляд крайне неудобно... Хотелось бы сделать так, чтобы поведение элементов в разных браузерах было одинаковым. Подскажите, что вы делаете в таком случае?

let main,
  color;
document.addEventListener("DOMContentLoaded", function() {
  main = this.getElementById('main');
  color = randColor(); // получаем первый цвет
});

function cloneBlock() {
  let p = main.querySelectorAll('p');
  let newItem;
  p.forEach(function(item, i) {
    if (i < 5) {
      newItem = item.cloneNode(true);
      newItem.style.background = color;
      main.append(newItem);
    }
  });
  color = randColor(); // меняем цвет
  return false;
}

function randColor() {
  let r = Math.floor(Math.random() * (256)),
    g = Math.floor(Math.random() * (256)),
    b = Math.floor(Math.random() * (256));

  return '#' + r.toString(16) + g.toString(16) + b.toString(16);
}

#main,
#other {
  background-color: #dedede;
  width: 80%;
  margin: 15px auto;
  padding: 15px;
}

#other p,
#main p {
  padding: 25px;
  height: 60px;
  background-color: #cacaca;
}

.btn {
  text-align: center
}

#other {
  color: #666
}

#other p {
  background-color: rgba(205, 238, 216, 0.93);
}

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <title>example</title>
</head>

<body>
  <div id="main">
    <h1>Первый блок</h1>
    <p>1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad architecto, dicta harum id illo in nesciunt pariatur praesentium, quae quam quibusdam ratione, sint veritatis voluptatum?</p>
    <p>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <p>3. Lorem ipsum dolor sit amet.</p>
    <p>4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam deserunt molestiae repellendus. Molestias provident quia voluptatum!</p>
    <p>5. Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
  </div>

  <div class="btn"><a href="#" onclick="return cloneBlock()">Клонировать первый блок</a></div>

  <div id="other">
    <h2>Второй блок</h2>
    <p>1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad architecto, dicta harum id illo in nesciunt pariatur praesentium, quae quam quibusdam ratione, sint veritatis voluptatum?</p>
    <p>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <p>3. Lorem ipsum dolor sit amet.</p>
    <p>4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam deserunt molestiae repellendus. Molestias provident quia voluptatum!</p>
    <p>5. Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
  </div>

</body>

</html>

Answer 1

Можно попробовать вставить cсылку вниз "вручную", а после между ссылкой и первым блоком вставлять новый:

let main,
  color,
  btn, // ссылка
other,  // второй блок
container; // Обертка с блоками 
document.addEventListener("DOMContentLoaded", function() {
  main = this.getElementById('main');
  color = randColor(); // получаем первый цвет
  btn = document.querySelector(".btn"); // ссылку
  other = document.getElemetById("other"); // второй блок
container = document.querySelector(".container");
});

function cloneBlock() {
  let p = main.querySelectorAll('p');
  let newItem;
  p.forEach(function(item, i) {
    if (i < 5) {
      newItem = item.cloneNode(true);
      newItem.style.background = color;
      main.append(newItem); // новый блок в конец первого
      container.insertBefore(btn, other); // ссылку между первым и вторым блоками
    }
  });
  color = randColor(); // меняем цвет
  return false;
}

function randColor() {
  let r = Math.floor(Math.random() * (256)),
    g = Math.floor(Math.random() * (256)),
    b = Math.floor(Math.random() * (256));

  return '#' + r.toString(16) + g.toString(16) + b.toString(16);
}

#main,
#other {
  background-color: #dedede;
  width: 80%;
  margin: 15px auto;
  padding: 15px;
}

#other p,
#main p {
  padding: 25px;
  height: 60px;
  background-color: #cacaca;
}

.btn {
  text-align: center
}

#other {
  color: #666
}

#other p {
  background-color: rgba(205, 238, 216, 0.93);
}

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <title>example</title>
</head>

<body>
  <div id="main">
    <h1>Первый блок</h1>
    <p>1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad architecto, dicta harum id illo in nesciunt pariatur praesentium, quae quam quibusdam ratione, sint veritatis voluptatum?</p>
    <p>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <p>3. Lorem ipsum dolor sit amet.</p>
    <p>4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam deserunt molestiae repellendus. Molestias provident quia voluptatum!</p>
    <p>5. Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
  </div>

  <div class="btn"><a href="#" onclick="return cloneBlock()">Клонировать первый блок</a></div>

  <div id="other">
    <h2>Второй блок</h2>
    <p>1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad architecto, dicta harum id illo in nesciunt pariatur praesentium, quae quam quibusdam ratione, sint veritatis voluptatum?</p>
    <p>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <p>3. Lorem ipsum dolor sit amet.</p>
    <p>4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam deserunt molestiae repellendus. Molestias provident quia voluptatum!</p>
    <p>5. Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
  </div>

</body>

</html>

Ну или можно сначала в конец первого блока вставлять новый, а затем ссылку:

main.append(newInem);
main.append(btn);

Оба варианта работают одинаково в google chrome и firefox.

P.S. Заметил небольшой (ну или большой, от ситуации зависит) баг. Изначально ссылка не находится внутри первого блока, а при нажатии на нее перемещается туда.

Answer 2

Нашлось решение. Для google chrome необходимо использовать определенные стили:

body {
  overflow-anchor: none;
}

После этого поведение данного браузера будет таким же, как и у mozilla firefox

БЛОГ НА HUSL

Добавленные элементы в браузере chrome уходят наверх, в firefox уходят вниз. Как сделать одинаково?

Ответы (2 шт):