Почему дергается меню?

Question

[Max Rudik]

Добрый день!
test1.rudik.info - верстаю, выкладываю на тестовый хостинг.
Меню дергается:
1) только на винде (на маке все ок)
2) только при переходе со страницы Our works на Home
При других переходах - не дергается.
Гугл на такие вопросы выдает ссылки дискуссии об очистке флоатов 5-летней давности.
Что не так с этим меню?

Comments

[Дмитрий]

а что дергается то?
3 кнопки при наведении не изменяются, иконки увеличиваются слегка
win, chrome

[V Sh.]

У вас что-то не так со слайдером на первой странице. Для проверки уберите его и замените статичной картинкой (как на других страницах). Он же на JS написано и подключается отдельно? Вполне возможно, что какие-то стили конфликтуют...

[Сергей delphinpro]

Из-за скроллбара
На маке он наверное отрисовывается поверх контента, как в мобильниках, поэтому нет дергания.
Проблема возникает из-за кривых стилей, потому что, как мне кажется по задумке здесь вообще не должно быть вертикального скролла, по крайней мере на большом мониторе.
Вот и ковыряйте в эту сторону.

[V Sh.]

Выяснил, что подергивания начинаются где-то тут (include.preload.js:

document.addEventListener("load", event =>
  {
    let element = event.target;
    if (/^i?frame$/.test(element.localName))
      checkCollapse(element);
  }, true);

Почему это происходит ума не приложу...

[alvvi]

V Sh.: здесь нет никаких сайд-эффектов, по сути и в checkCollapse() не должно быть, но лучше проверить.

[V Sh.]

Илья Ростопка: Да я пытался пошагово посмотреть что да как в хроме (win), докопался только до этого. Дальше там дебри для меня пошли: по минифицированному js-файлу не очень то и понятно что происходит. Причем именно этот addEventListener несколько раз вызывается. Тоже непонятно почему...

[alvvi]

V Sh.: функция checkCollapse должна находится в замыкании слушателя, ctrl + f вам в помощь. Вызывается он на каждый эвент "load" документа, очевидно.

[V Sh.]

Илья Ростопка: Я правильно понимаю, что если document.addEventListener("load", func) указан в стороннем скрипте, то функция сработает N-1 раз, где N = количество скриптов, подключенных после данного скрипта + сама html страница? А на файлы CSS это распространяется? Просто никогда не подключал на document, обычно на window... Там только раз срабатывает...

[alvvi]

V Sh.: по сути, ивент должен происходить, когда DOM полностью построен, то есть все внешние скрипты, стили, изображения загружены. Однако, насколько я понимаю, начиная с HTML5 document диспатчит другой ивент DOMContentLoaded. Весь алгоритм более подробно описан в спеицифкации тут.

Answer 1

[Сергей]

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

.header-list .header-item {border: 1px solid transparent}
.active{border-color: #fff}

p.s. Не факт что дело в этом, так как не могу протестировать на win