Фриланс-проєкти

Фриланс-проєкти

Виправлення зависання сайту на iOS (Safari)

Name: Виправлення зависання сайту на iOS (Safari)
Price: 700 UAH
Availability: InStock

CMS, HTML та CSS верстання — неправильно зазначені категорії?

700 UAH

Відгук замовника про співпрацю з Anastasiya Pinchuk

Виправлення зависання сайту на iOS (Safari)

700 UAH

Працюю з Анастасією вже не перший раз, і щоразу переконуюсь у правильності вибору. Цього разу допомогла вирішити складну технічну проблему з зависанням сайту на iOS — те, з чим я сам боровся довгий час. Швидко розібралася в ситуації, знайшла причину і усунула. Рекомендую як надійного спеціаліста, якому можна довіряти складні завдання.

5.0

Арут Y.

Зустрічний відгук

19 травня

Відгук фрилансера про співпрацю з Арутом

Виправлення зависання сайту на iOS (Safari)

700 UAH

Дякую за чудову співпрацю — ви чітко поставили задачу, а ваш фідбек допомагав рухатись у правильному напрямку. Знайшла і усунула проблему з продуктивністю, і сайт тепер працює значно швидше. Буду рада співпрацювати ще!

5.0

Anastasiya Pinchuk

Зустрічний відгук

19 травня

Проєкт перекладено автоматично. Увійдіть або зареєструйтесь, щоб побачити оригінал

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 працюють як раніше

Ставки 8 Обговорення 16

Віталій Кравченко

26 0

Проєкти 26
Оцінка 5.0
Рейтинг 3 567

Бюджет: 3500 UAH Термін: 2 дні

Вітаю! Причина проблеми — Spline WebGL блокує main thread у Safari, а також non-passive listeners у Remodal. Виправлю обидві проблеми без впливу на Desktop та Android.

Ihor Nadolskyi

47 0

Проєкти 47
Оцінка 5.0
Рейтинг 12 213

Бюджет: 4000 UAH Термін: 1 день

Вітаю, без проблем виконаю вашу задачу
Пишіть в особисті надавайте доступ
Буду радий Вам допомогти!

Сергій Гірбасов

5 0

Проєкти 5
Оцінка 4.5
Рейтинг 1 382

Бюджет: 3500 UAH Термін: 2 дні

Вітаю. Дуже круто, що ви вже провели такий глибокий попередній аналіз, це зекономить нам купу часу. Проблема на 99% не в самому script.js чи подіях кліку, а у WebGL/Canvas (Spline 3D). iOS Safari має дуже жорсткі обмеження на використання пам'яті. Коли 3D-елемент рендериться на мобільному, процесор айфона перегрівається і починає жорстко троттлитися. Через це головний потік блокується, і звичайний touch-івент на попап стає в чергу, спрацьовуючи аж через 20 секунд. Те, що ви приховали елементи через CSS (will-change та content-visibility), не зупиняє роботу JS-рушія, який продовжує малювати 3D у фоні.
Щоб це виправити, нам потрібно не просто приховати 3D-елементи, а повністю заборонити їхню ініціалізацію в DOM дереві для мобільних пристроїв через JavaScript, щоб canvas взагалі не створювався. Паралельно я перевірю слухачі подій Remodal на конфлікт з passive listeners в Safari.
Готовий взяти це в роботу. Для старту потрібен доступ до адмінки WP та FTP, щоб дістатися до файлів теми, де ініціалізується Spline. По вартості орієнтуюсь на 3500 грн, зроблю за 1-2 дні з тестуванням на реальних iOS пристроях. Дайте знати, якщо готові почати.

Oleksandr Korost

8 2

Проєкти 8
Оцінка 4.4
Рейтинг 872

Бюджет: 700 UAH Термін: 1 день

Арут вітаю! Приходьте в приватні, допоможу з рішення, думаю воно набагато простіше ніж здається)

Артем П. 19 травня

Не вижу никаких проблем, все открывается нормально и без задержки.

Арут Y.

19 травня

а в чем открываете?
так как в Safari проблема явная, проверена на 3х устройствах
могу загрузить видео с записью экрана

Mykhailo K. 19 травня

IOS 18 Safari та IOS 26 Safari - ніяких затримок чи перегрівів немає

Артем П. 19 травня

Арут Y.

19 травня

на desktop`е проблема не появляется

Mykhailo K. 19 травня

З телефона тестував

Арут Y.

19 травня

запись экрана:

https://drive.google.com/file/d/1jMpT18YebrsbHJA4d5PxWcdQ9GIdMbr2/view?usp=sharing

Артем П. 19 травня

Может у Вас бета версия установлена и в ней какой-то баг ?

Арут Y.

19 травня

да, тоже думал что в этом проблема, но нет. Так же проблема проявляется в Chrome браузере.

также проблема повторяется(но немного в другом ключе) с браузером Brave:
https://drive.google.com/file/d/1SbTzpl1jJMDX01l03Lw5vgNk083I11CH/view?usp=sharing

как видите, поп ап на главной в данном случае работает ок, но загрузка страниц кейсов грузит очень долго, примерно 2 минуты, посе чего все-таки загружает страницу. Что примечательно - на странице кейсов также имеется 3D элемент

Артем П. 19 травня

Так может проблема в какой-то версии iOS ?

Арут Y.

19 травня

у меня на руках лично 17pro + 17 pro max с последней версий iOs
также тестил на 12 и на Х

Артем П. 19 травня

Тогда мистика )

Арут Y.

19 травня

спорить не буду, самому уже интересно в чем проблема)
поэтому написал сюда

Mykhailo K. 19 травня

Немає проблеми такої
https://drive.google.com/file/d/1NqRvbP-wzstWFZlxPfbBm9Q-f3_bOLlW/view?usp=drivesdk

Mykhailo K. 19 травня

Не бачу проблем) IOS18

Артем П. 19 травня

Кто-то решил пропиарить свой сайт таким способом )

Додати коментар

Арут Y.
Харків, Україна

Проєктів 18
Оцінка 5.0
Рейтинг 1 112

Виправлення зависання сайту на iOS (Safari)

Відгук замовника про співпрацю з Anastasiya Pinchuk

Виправлення зависання сайту на iOS (Safari)

5.0

Арут Y.

Відгук фрилансера про співпрацю з Арутом

Виправлення зависання сайту на iOS (Safari)

5.0

Anastasiya Pinchuk

Що було перевірено і зроблено

Поточний стан коду (script.js)

Гіпотеза про причину

Завдання для фрилансера

Що потрібно зробити:

Стек:

Доступи:

Критерій приймання:

Віталій Кравченко

Ihor Nadolskyi

Сергій Гірбасов

Oleksandr Korost

Ставки приховані

Ставки поки відсутні

Актуальні фриланс-проєкти в категорії CMS

Доопрацювання сайту агентства нерухомості (WordPress)

Налаштування односторінкового сайту на Європу.

CТВОРИТИ СТОРІНКИ-ЛЕНДИНГ НА САЙТІ НА БАЗІ WORDPRESS

SEO-аудит сайту на WP

Розробка платформи (сайту) ENGoose з ESL-матеріалами, підпискою та особистим кабінетом