Скольжение по мобильной проблеме (Iphone)

Ответ 1

Посмотрев в своем инспекторе элементов DOM, вы можете узнать, что при прокрутке позиции заголовка изменяется от absolute до fixed и, возможно, именно это и вызывает проблему.

Это заголовок перед прокруткой:

<div id="header" class="header">

и после прокрутки:

<div id="header" class="header header-fixed header-prepare">

Попробуйте изменить HTML-код и присвоить заголовку позицию fixed с самого начала:

<div id="header" class="header header-fixed">

Ответ 2

Ну, я вижу пропущенный/отсталый свиток, когда я добираюсь до слайда "МЫ".

Возможно, анимация текстов fadingIn начинается там, и это делает ее ошибкой, мои рекомендации:

1- переместите все теги <link> и <script> в нижней части вашего HTML, сразу после </body>, чтобы браузер сначала загрузил элементы HTML, а затем ссылки и скрипты.

2. Рассмотрите возможность удаления ненужных анимаций, скриптов, ссылок и т.д. Например, я не вижу смысла этих анимаций fadeIn во всем тексте. Если у вас есть их, чтобы сделать сайт не похожим на проблему, но я рекомендую использовать анимацию только для работы с пользователями. Пример: Используйте fadeIn или любой тип анимации для определенного элемента, который вы хотите видеть. Анимация заставляет глаза обратить на нее внимание, и пользователь сразу посмотрит на анимацию и обратит внимание на информацию.

3 Как всегда, минимизируйте/сжимайте свои скрипты, CSS и изображения.

4- G-zip

5- Используйте GTmetrix.com, чтобы увидеть все не так с вашим сайтом.

Я еще раз посмотрю ваш код и посмотрю, есть ли проблемы с кодом.

Edit:

Посмотрите здесь: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Feven-mind.com%2F&tab=mobile

И здесь: https://gtmetrix.com/reports/even-mind.com/uVHRlGCl

Примечание: Ваш веб-сайт имеет размер 3,04 МБ, подумайте о том, чтобы выполнить приведенные выше инструкции + ссылки!

Ответ 3

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

Функция debounce ограничивает количество вызовов функции. Очень удобно для прокрутки событий и т.д.

Основной пример (из блога Дэвида Уолша): https://davidwalsh.name/javascript-debounce-function

 function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

Вы можете использовать его на своем сайте как таковой

var handyScrollFunction = debounce(function() {
    // put your scroll/parallax in here
}, 250);

window.addEventListener('scroll', handyScrollFunction);

Вы можете играть с таймаутом, чтобы убедиться, что прокрутка по-прежнему плавная.

Ответ 4

Как вы можете видеть из представления временной шкалы DevTools, в верхней части есть много красных отметок. Это указывает на медленные кадры. Глядя на скриншоты, вы можете легко сказать что-то неприятное о прокрутке.

Взгляд немного глубже - есть 2 функции, запущенные с событием scroll:

• Первый вызов функции из polyfill.js, который делегирует выполнение функции requestAnimationFrame (что хорошо)
• Второй, вызов функции jQuery, который немедленно выполняет функцию.

Что вы можете сделать, чтобы улучшить перформанс прокрутки - делегировать функцию 2 на requestAnimationFrame. В простейшей форме вы можете пойти примерно так:

$(window).scroll(function() {
  requestAnimationFrame(someFunctionUpdatingDOM);
})

Другое дело - кэширование переменных. Функция, которая вычисляет позицию заголовка, пересекает DOM каждый раз при вызове. Поскольку операции DOM довольно дороги, лучше избегать их, если это не необходимо.

var $header = $('.header'); // traverse DOM once, cache variable for later use in function

function someFunctionUpdatingDOM() {
  $header.addClass('something');
}

Еще одна вещь, которую я заметил, - это проблемы с прокруткой на рабочем столе, вызванные обширными изображениями фонового изображения. Это вызвано изменением script background-position для достижения эффекта параллакса. Как правило, лучше использовать CSS-преобразования, такие как translate3d(), которые аппаратно ускоряются. Таким образом, браузеры могут планировать преобразования уровня (изображения) на GPU, опуская ненужные копии, делая страницу прокручиваемой плавно.

Удачи с исправлениями!