Zlecenia dla freelancerów

Zlecenia dla freelancerów

Poprawa zawieszania się strony na iOS (Safari)

Content Management Systems, Układ HTML i CSS — podano nieprawidłowe kategorie?

60 PLN

Opinia zleceniodawcy o współpracy z Anastasiya Pinchuk

Poprawa zawieszania się strony na iOS (Safari)

60 PLN

Pracuję z Anastasją już nie pierwszy raz i za każdym razem utwierdzam się w słuszności wyboru. Tym razem pomogła rozwiązać skomplikowany problem techniczny z zawieszaniem się strony na iOS — z czym sam zmagałem się przez długi czas. Szybko zrozumiała sytuację, znalazła przyczynę i usunęła. Polecam jako rzetelnego specjalistę, któremu można powierzyć trudne zadania.

5.0

Arut Y.

Opinia zwrotna

19 maja

Opinia freelancera o współpracy z Arut Y.

Poprawa zawieszania się strony na iOS (Safari)

60 PLN

Dziękuję za wspaniałą współpracę — jasno określiłeś zadanie, a twój feedback pomagał iść w dobrym kierunku. Znalazłam i usunęłam problem z wydajnością, a strona teraz działa znacznie szybciej. Będę zadowolona z dalszej współpracy!

5.0

Anastasiya Pinchuk

Opinia zwrotna

19 maja

Zlecenie jest tłumaczone automatycznie. Zaloguj się lub zarejestruj się, żeby zobaczyć oryginał

arut.marketing — WordPress, motyw niestandardowy, Elementor, Contact Form 7

Na urządzeniach mobilnych iPhone (iOS Safari) strona zachowuje się nieprawidłowo:

Popup z formularzem zgłoszeniowym — po naciśnięciu przycisku „Chcę normalną reklamę” (i innych przycisków CTA) występuje opóźnienie ~20 sekund, po czym popup się otwiera. Przy zamykaniu popupu (krzyżyk) — to samo opóźnienie.
Mobilne menu — po naciśnięciu punktów menu również występowało opóźnienie (częściowo naprawione).
Strona przypadków — przy wejściu na stronę telefon mocno się nagrzewa, strona nie ładuje się lub pokazuje wieczne ładowanie.

Na Androidzie i Desktopie wszystkie funkcje działają poprawnie bez żadnych opóźnień.

Co zostało sprawdzone i zrobione

Krok	Działanie	Rezultat
1	Wyczyszczenie pamięci podręcznej przeglądarki i WP Fastest Cache	Nie pomogło
2	Wyłączanie wtyczek po kolei	Nie pomogło
3	Wyłączanie minifikacji JS/CSS w WP Fastest Cache	Nie pomogło
4	Sprawdzenie obecności reCAPTCHA w CF7	Captcha nieobecna
5	Dodanie CSS `will-change: transform`, `translateZ(0)`, `backface-visibility: hidden` do tła 3D-elementów	Nie pomogło
6	Dodanie `content-visibility: hidden` dla ukrytych na mobilnych elementów	Nie pomogło
7	Wyłączanie WOW.js na mobilnych przez `wp_dequeue_script`	Nie pomogło
8	Całkowite wyłączenie `main_js` (script.js motywu) na mobilnych	Problem zniknął, ale cały serwis się zepsuł — potwierdzono, że winowajcą jest script.js
9	Zmiana `$(window).scroll(...)` na `window.addEventListener('scroll', ..., { passive: true })`	Naprawiło opóźnienie w mobilnym menu, ale opóźnienie przy naciśnięciu na popup i zawieszenie strony przypadków pozostały

Aktualny stan kodu (script.js)

javascript
jQuery(function($) {
 $(&#34;.fancy&#34;).fancybox();

 $(&#34;.lang-wrap-active, .active-language&#34;).on(&#34;click&#34;, &#34;a&#34;, function(){
 return false;
 });

 window.addEventListener(&#039;scroll&#039;, function() {
 if (window.scrollY &gt; 50) {
 document.querySelector(&#039;header&#039;).classList.add(&#039;fixed&#039;);
 } else {
 document.querySelector(&#039;header&#039;).classList.remove(&#039;fixed&#039;);
 }
 }, { passive: true });

 var wow &#61; new WOW({
 boxClass: &#039;wow&#039;,
 animateClass: &#039;animated&#039;,
 offset: 0,
 mobile: false,
 live: true,
 scrollContainer: null,
 resetAnimation: true,
 });
 wow.init();

 $(&#34;.header-hambugreg&#34;).click(function(){
 $(&#34;.header-hambugreg&#34;).toggleClass(&#039;is-active&#039;);
 $(&#34;.mobile-header&#34;).toggleClass(&#039;active&#039;);
 $(&#34;.main-header&#34;).toggleClass(&#039;active&#039;);
 });
 $(&#34;.main-menu ul li a&#34;).click(function(){
 $(&#34;.header-hambugreg&#34;).removeClass(&#039;is-active&#039;);
 $(&#34;.mobile-header&#34;).removeClass(&#039;active&#039;);
 $(&#34;.main-header&#34;).removeClass(&#039;active&#039;);
 });
 $(&#34;.mobile-header-btn-close&#34;).on(&#34;click&#34;, function(){
 $(&#34;.header-hambugreg&#34;).removeClass(&#039;is-active&#039;);
 $(&#34;.mobile-header&#34;).removeClass(&#039;active&#039;);
 $(&#34;.main-header&#34;).removeClass(&#039;active&#039;);
 });

 $(document).on(&#039;click&#039;,&#039;a.sing-row-follow-copy&#039;,function(e){
 e.preventDefault();
 var url &#61; window.location.href;
 var $t &#61; $(&#039;&lt;input&gt;&#039;);
 $(&#039;body&#039;).append($t);
 $t.val(url).select();
 document.execCommand(&#039;copy&#039;);
 $t.remove();
 });

 $(&#039;.m-7-slick&#039;).slick({
 arrows: true,
 prevArrow: &#039;.m-7-btn-left&#039;,
 nextArrow: &#039;.m-7-btn-right&#039;,
 slidesToShow: 1,
 focusOnSelect: true,
 autoplay: false,
 autoplaySpeed: 4000,
 dots: false,
 fade: false,
 infinite: false,
 initialSlide: 0,
 pauseOnHover: true,
 pauseOnDotsHover: false,
 rows: 1,
 variableWidth: true,
 });

 $(&#34;.m-8-item&#34;).on(&#34;click&#34;, function(){
 $(this).toggleClass(&#34;active&#34;);
 });

 const page_name &#61; $(&#34;.main-footer&#34;).data(&#34;page&#34;);
 $(&#34;.hide-input-page-name&#34;).attr(&#34;value&#34;, page_name);

 $(&#34;.m-5 .button-name&#34;).attr(&#34;value&#34;, &#34;Ekran głównej oferty&#34;);
 $(&#34;.m-10 .button-name&#34;).attr(&#34;value&#34;, &#34;Ekran kontaktów&#34;);

 $(&#34;.m-3-item-btn&#34;).on(&#34;click&#34;, function(){
 const textbtn &#61; $(this).text();
 $(&#34;.remodal .button-name&#34;).attr(&#34;value&#34;, textbtn);
 });
});

Hipoteza dotycząca przyczyny

Na stronie przypadków i w sekcji z popupem znajdują się dekoracyjne elementy 3D (.hero-round-item-1 — .hero-round-item-4). Prawdopodobnie są to obiekty Spline.design lub podobna animacja WebGL/Canvas, która:

Nieustannie przerysowuje się w iOS Safari nawet w tle
Blokuje główny wątek przeglądarki
Powoduje przegrzewanie urządzenia i zawieszanie wszelkich zdarzeń touch/click

Również podejrzewana jest biblioteka Remodal (popup) — możliwe, że ma non-passive touch listeners, które kolidują z iOS Safari.

Zadanie dla freelancera

Co należy zrobić:

Zdiagnozować dokładną przyczynę zawieszenia na iOS Safari (najlepiej przez Safari Web Inspector na Mac + rzeczywisty iPhone)
Naprawić zawieszenie popupu — naciśnięcie przycisków CTA powinno otwierać popup bez opóźnienia na iPhone
Naprawić zawieszenie strony przypadków — strona powinna ładować się normalnie bez przegrzewania telefonu
Nie zepsuć wersji Desktop i Android strony

Stos technologiczny:

WordPress + motyw niestandardowy
Elementor
Contact Form 7 + Remodal (popup)
jQuery, WOW.js, Slick slider, Fancybox
Prawdopodobnie Spline.design (elementy 3D w tle)

Dostępy:

WordPress Admin
FTP / SSH (na żądanie)

Kryteria akceptacji:

Popup otwiera się na iPhone bez opóźnienia (mniej niż 1 sekunda)
Strona przypadków ładuje się normalnie, telefon się nie nagrzewa
Desktop i Android działają jak wcześniej

Oferty 8 Dyskusje 16

Vitalii Kravchenko

24 0

Budżet: 3500 UAH Termin: 2 dni

Cześć! Powodem problemu jest to, że Spline WebGL blokuje główny wątek w Safari, a także non-passive listeners w Remodal. Naprawię oba problemy bez wpływu na Desktop i Android.

Ihor Nadolskyi

47 0

Budżet: 4000 UAH Termin: 1 dzień

Witam, bez problemu wykonam Twoje zadanie. Pisz na prywatne, udostępnij dostęp. Będę szczęśliwy, mogąc Ci pomóc!

Serhii Hirbasov

5 0

Budżet: 3500 UAH Termin: 2 dni

Witam. Bardzo fajnie, że już przeprowadziliście tak głęboką analizę wstępną, to zaoszczędzi nam mnóstwo czasu. Problem w 99% nie leży w samym script.js ani w zdarzeniach kliknięcia, lecz w WebGL/Canvas (Spline 3D). Safari na iOS ma bardzo surowe ograniczenia dotyczące użycia pamięci. Gdy element 3D jest renderowany na urządzeniu mobilnym, procesor iPhone'a przegrzewa się i zaczyna mocno throttlować. Z tego powodu główny wątek jest blokowany, a zwykłe zdarzenie touch na popupie trafia do kolejki, uruchamiając się dopiero po 20 sekundach. To, że ukryliście elementy za pomocą CSS (will-change i content-visibility), nie zatrzymuje działania silnika JS, który nadal rysuje 3D w tle. Aby to naprawić, musimy nie tylko ukryć elementy 3D, ale całkowicie zabronić ich inicjalizacji w drzewie DOM dla urządzeń mobilnych za pomocą JavaScript, aby canvas w ogóle nie był tworzony. Równocześnie sprawdzę słuchaczy zdarzeń Remodal pod kątem konfliktu z passive listeners w Safari. Jestem gotów zająć się tym projektem. Na początek potrzebuję dostępu do panelu administracyjnego WP oraz FTP, aby dostać się do plików motywu, gdzie inicjalizowany jest Spline. Co do kosztów, orientuję się na 3500 zł, zrobię to w 1-2 dni z testowaniem na rzeczywistych urządzeniach iOS. Dajcie znać, jeśli jesteście gotowi zacząć.

Oleksandr Korost

8 2

Budżet: 700 UAH Termin: 1 dzień

Aru, witam! Przyjdź na prywatne, pomogę z rozwiązaniem, myślę, że jest to znacznie prostsze niż się wydaje)

Artem P. 19 maja

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

Arut Y.

19 maja

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

Mykhailo K. 19 maja

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

Artem P. 19 maja

Arut Y.

19 maja

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

Mykhailo K. 19 maja

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

Arut Y.

19 maja

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

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

Artem P. 19 maja

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

Arut Y.

19 maja

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

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

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

Artem P. 19 maja

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

Arut Y.

19 maja

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

Artem P. 19 maja

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

Arut Y.

19 maja

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

Mykhailo K. 19 maja

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

Mykhailo K. 19 maja

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

Artem P. 19 maja

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

Dodaj komentarz

Arut Y.
Charków, Ukraina

Zleceń 18
Ocena 5.0
Ranking 1 112

Poprawa zawieszania się strony na iOS (Safari)

Opinia zleceniodawcy o współpracy z Anastasiya Pinchuk

Poprawa zawieszania się strony na iOS (Safari)

5.0

Arut Y.

Opinia freelancera o współpracy z Arut Y.

Poprawa zawieszania się strony na iOS (Safari)

5.0

Anastasiya Pinchuk

Co zostało sprawdzone i zrobione

Aktualny stan kodu (script.js)

Hipoteza dotycząca przyczyny

Zadanie dla freelancera

Co należy zrobić:

Stos technologiczny:

Dostępy:

Kryteria akceptacji:

Vitalii Kravchenko

Ihor Nadolskyi

Serhii Hirbasov

Oleksandr Korost

Oferty ukryte

Aktualnie brak ofert

Aktualne zlecenia dla freelancerów w kategorii Content Management Systems

Strona na szablonie Wordpress

Opracowanie oprogramowania układowego (Embedded Firmware) dla urządzenia noszonego BLE (Nordic nRF52840 / nRF5340 + PPG)

Rozwój nowoczesnego sklepu internetowego dla Optyki - sprzedaż okularów (WordPress / WooCommerce)

Rozwój sklepu internetowego z platformą B2B dla partnerów i dropshipperów

Przeniesienie sklepu internetowego ocStore 2.3 na nowoczesną wersję OpenCart (ocStore) + poprawki