Chrome вертикальный прыжок при обновлении страницы прокручивается вниз

При разработке веб-сайта с использованием Chrome заметил следующее: когда я обновляю страницу, пока она полностью прокручивается, я могу наблюдать вертикальный скачок.

Смотрите следующее Bootply.

Для воспроизведения откройте полноэкранный предварительный просмотр (значок монитора справа) и попробуйте следующее:

  1. обновить страницу (подтвердить повторную отправку формы) -> без перехода
  2. прокрутить до середины, обновить (подтвердить повторную отправку формы) -> без перехода
  3. прокрутить до самого низа, обновить (подтвердить повторную отправку формы) -> вертикальный переход

Прыжок на самом деле вызван этим Javascript, который пытается поддерживать вертикальный ритм, когда страница содержит цифры с .align-center учебный класс:

$(document).ready(function() {
  $(window).resize(function() {
    var baseline = parseInt($('body').css('line-height'), 10)
    $('.align-center').each(function() {
      var height = $(this).outerHeight();
      console.log(height)
      var bottom = baseline - (height % baseline);

      if (bottom != 0)
      {
        bottom += parseInt($(this).css('padding-bottom'), 10)
        $(this).css('padding-bottom', bottom);
      }
    });
  }).trigger("resize");
});

Конечно, удаление этого Javascript также удаляет наблюдаемый вертикальный скачок. Что я не понимаю, так это то, что заполнение применяется, когда DOM готов, поэтому оно не должно вызывать видимых вертикальных скачков. Я думаю, что переход связан с тем, как Chrome обрабатывает окно просмотра, когда страница прокручивается до самого низа, но я не знаю, как это подтвердить или подтвердить.

При попытке сделать это в Firefox или Safari, я не наблюдаю никакого скачка.

Любая идея, пожалуйста?

Изменить: я открыл ошибку на трекер ошибок Chrome.

Источник

2 ответа

Решение

У меня нет полного ответа, но некоторые замечания относительно Chrome:

  1. Браузер может начать рисовать документ до события готовности документа
  2. Браузер может показывать вертикальную полосу прокрутки перед событием готовности документа
  3. Браузер может прокрутить до ранее видимого содержимого до события готовности документа
  4. Браузер может прокрутить до ранее видимого содержимого после загрузки окна

Ваш код, кажется, добавляет 20px отступ к рисунку на событии готовности документа. Итак, вот последствия:

Прокрутите вверх или в середину + Обновить:

Браузер прокручивает тот же контент, который был виден до обновления. Увеличение высоты тела не влияет на положение прокрутки, за исключением того, что полоса прокрутки меняет свою высоту.

Прокрутите вниз + Обновить:

Браузер пытается по возможности выровнять тело снизу. Кажется, сделать это дважды+. Тело прокручивается до самого дна, когда контент доступен. Затем 20px добавляется к высоте тела на готовом документе, что активирует кнопку "прокрутка вниз". При загрузке страницы браузер снова выравнивает тело по нижней части, толкая весь контент вниз на 20 пикселей, что создает поведение "вертикального прыжка".

+ Для тестирования я добавил $(window).scroll(function() { console.log(arguments); }), Событие прокрутки сработало дважды: после чтения документа и после загрузки окна.

В итоге:

Похоже, что Chrome выравнивает тело по нижней части страницы, если это было до обновления страницы. И это происходит до и после загрузки страницы, вызывая эффект прыжка.

Firefox, кажется, следует тем же шагам. Однако, похоже, что Firefox разумно обрабатывает прокрутку до нижнего регистра. Так как тело выровнено по основанию, оно меняет макет (вызванный заполнением) в области над окном просмотра; увеличение высоты полосы прокрутки, но не прокрутка.

Источник

Прежде всего, я должен вас разочаровать, так как я не являюсь разработчиком Chrome или другим официальным источником. Но я потратил некоторое время на эту проблему и решил поделиться тем, что нашел. Вы знаете, для потомков.

Как у тебя наверное есть, я поставил пару alert S в коде и пытался наблюдать, что именно происходит. Мне кажется, что окно просмотра визуализируется, Javascript запускается, применяется заполнение, весь остальной контент перемещается вниз, затем Chrome распознает и фиксирует высоту окна просмотра, чтобы вместить дополнительный отступ. Это похоже на честную ошибку рендеринга для меня.

Тем не менее, я нашел что-то, что исправило эффект, по крайней мере, в моих тестах. Я не знаю, применимо ли это в вашей среде, но, возможно, это поможет в дальнейшей диагностике проблемы рендеринга.

Простое добавление дополнительного поля к отступу вместо отступа сделало это для меня.

if (bottom != 0)
{
    bottom += parseInt($(this).css('padding-bottom'), 10);
    $(this).css('margin-bottom', bottom);
}

Может быть, кто-то еще может придумать фактическое объяснение. Я конечно хотел бы знать, что именно вызывает это нервирующее поведение.

Источник
Другие вопросы по тегам