arut.marketing — WordPress, кастомная тема, Elementor, Contact Form 7
На мобильных устройствах iPhone (iOS Safari) сайт ведёт себя некорректно:
Попап с формой заявки — при нажатии на кнопку «Хочу нормальную рекламу» (и другие CTA-кнопки) происходит задержка ~20 секунд, после чего попап открывается. При закрытии попапа (крестик) — та же задержка.
Мобильное меню — при нажатии на пункты меню также была задержка (частично исправлено).
Страница кейсов — при заходе на страницу телефон сильно нагревается, страница не прогружается или показывает вечную загрузку.
На Android и Desktop все функции работают корректно без каких-либо задержек.
Что было проверено и сделано
| Шаг | Действие | Результат |
|---|
| 1 | Очистка кэша браузера и WP Fastest Cache | Не помогло |
| 2 | Отключение плагинов поочерёдно | Не помогло |
| 3 | Отключение минификации JS/CSS в WP Fastest Cache | Не помогло |
| 4 | Проверка наличия reCAPTCHA в CF7 | Капча отсутствует |
| 5 | Добавление CSS will-change: transform, translateZ(0), backface-visibility: hidden на фоновые 3D-элементы | Не помогло |
| 6 | Добавление content-visibility: hidden для скрытых на мобильных элементов | Не помогло |
| 7 | Отключение WOW.js на мобильных через wp_dequeue_script | Не помогло |
| 8 | Отключение main_js (script.js темы) полностью на мобильных | Проблема исчезла, но сломался весь сайт — подтверждено что виновник в script.js |
| 9 | Замена $(window).scroll(...) на window.addEventListener('scroll', ..., { passive: true }) | Исправило задержку в мобильном меню, но задержка при нажатии на попап и зависание страницы кейсов остались |
Текущее состояние кода (script.js)
javascript
jQuery(function($) { $(".fancy").fancybox(); $(".lang-wrap-active, .active-language").on("click", "a", function(){ return false; }); window.addEventListener('scroll', function() { if (window.scrollY > 50) { document.querySelector('header').classList.add('fixed'); } else { document.querySelector('header').classList.remove('fixed'); } }, { passive: true }); var wow = new WOW({ boxClass: 'wow', animateClass: 'animated', offset: 0, mobile: false, live: true, scrollContainer: null, resetAnimation: true, }); wow.init(); $(".header-hambugreg").click(function(){ $(".header-hambugreg").toggleClass('is-active'); $(".mobile-header").toggleClass('active'); $(".main-header").toggleClass('active'); }); $(".main-menu ul li a").click(function(){ $(".header-hambugreg").removeClass('is-active'); $(".mobile-header").removeClass('active'); $(".main-header").removeClass('active'); }); $(".mobile-header-btn-close").on("click", function(){ $(".header-hambugreg").removeClass('is-active'); $(".mobile-header").removeClass('active'); $(".main-header").removeClass('active'); }); $(document).on('click','a.sing-row-follow-copy',function(e){ e.preventDefault(); var url = window.location.href; var $t = $('<input>'); $('body').append($t); $t.val(url).select(); document.execCommand('copy'); $t.remove(); }); $('.m-7-slick').slick({ arrows: true, prevArrow: '.m-7-btn-left', nextArrow: '.m-7-btn-right', slidesToShow: 1, focusOnSelect: true, autoplay: false, autoplaySpeed: 4000, dots: false, fade: false, infinite: false, initialSlide: 0, pauseOnHover: true, pauseOnDotsHover: false, rows: 1, variableWidth: true, }); $(".m-8-item").on("click", function(){ $(this).toggleClass("active"); }); const page_name = $(".main-footer").data("page"); $(".hide-input-page-name").attr("value", page_name); $(".m-5 .button-name").attr("value", "Екран главного оффера"); $(".m-10 .button-name").attr("value", "Екран контактов"); $(".m-3-item-btn").on("click", function(){ const textbtn = $(this).text(); $(".remodal .button-name").attr("value", textbtn); });});
Гипотеза о причине
На странице кейсов и в секции с попапом присутствуют декоративные 3D-элементы (.hero-round-item-1 — .hero-round-item-4). Вероятно, это Spline.design объекты или аналогичная WebGL/Canvas анимация, которая:
Постоянно перерисовывается iOS Safari даже в фоне
Блокирует главный поток браузера
Вызывает перегрев устройства и зависание любых touch/click событий
Также подозревается библиотека Remodal (попап) — возможно, у неё есть non-passive touch listeners, которые конфликтуют с iOS Safari.
Задача для фрилансера
Что нужно сделать:
Диагностировать точную причину зависания на iOS Safari (желательно через Safari Web Inspector на Mac + реальный iPhone)
Исправить зависание попапа — нажатие на CTA-кнопки должно открывать попап без задержки на iPhone
Исправить зависание страницы кейсов — страница должна нормально загружаться без перегрева телефона
Не сломать Desktop и Android версии сайта
Стек:
WordPress + кастомная тема
Elementor
Contact Form 7 + Remodal (попап)
jQuery, WOW.js, Slick slider, Fancybox
Возможно Spline.design (3D-элементы на фоне)
Доступы:
WordPress Admin
FTP / SSH (по запросу)
Критерий приёмки:
Попап открывается на iPhone без задержки (менее 1 секунды)
Страница кейсов загружается нормально, телефон не греется
Desktop и Android работают как прежде
