Az oldalam Androidon működik, de iPhone-on/Safariban elromlik — miért, és hogyan javítom?

Ez az egyik legbosszantóbb helyzet: megnyitod az oldalad az Android telefonodon, és minden tökéletesen néz ki. Aztán egy ügyfél küld egy képernyőképet iPhone-ról — egymásra csúszó gombok, egy videó, ami nem indul el, a képernyőről kilógó szöveg. Olyan érzés, mintha az oldalad félig tönkrement volna, pedig te egyetlen hibát sem látsz.

Jó hír: ez szinte soha nem fekete mágia. Ez a böngészőmotorok egy jól ismert különbsége. A Safari (a WebKit motor) néhány dolgot másképp értelmez, mint a Chrome. Ebben a cikkben elmagyarázom, miért fordulnak elő ezek a különbségek, mik a leggyakoribb konkrét okok, és hogyan azonosíthatod és javíthatod őket — még akkor is, ha nincs kéznél iPhone-od.

Miért létezik a különbség: a Safari nem a Chrome

Minden böngészőnek van egy motorja, amely a kódot azzá alakítja, amit a képernyőn látsz. A Chrome, az Edge, a Brave és a legtöbb böngésző Androidon ugyanazt a motort, a Blinket használja. A Safari — és, ami fontos, MINDEN böngésző iPhone-on, beleértve az iOS-es Chrome-ot is — kénytelen az Apple motorját, a WebKitet használni.

Ez az a kulcs, amit a legtöbb tulajdonos figyelmen kívül hagy: nincs igazi Chrome iPhone-on. Ha telepíted a Chrome-ot egy iPhone-ra, alatta az még mindig a Safari. Tehát ha valami elromlik iPhone-on, az egy WebKit-probléma, függetlenül attól, hogy a látogatód látszólag melyik böngészőt használja.

A WebKit szigorúbb, és néhány funkciót később vezet be. Az a kód, amely Androidon működik, mert a Chrome megbocsátja a kis hibákat, elbukhat a Safariban, amely szigorúbban veszi a szabályokat.

A leggyakoribb konkrét okok

Tapasztalataink szerint szinte minden „csak iPhone-on" jelentkező probléma néhány visszatérő bűnösre vezethető vissza:

• Képernyőmagasság (100vh): iPhone-on a Safari sávja elrejtőzik és újra megjelenik, így a 100vh magasabb a valódi képernyőnél — a teljes képernyős szakaszok kilógnak a keretből. A modern megoldás a dvh mértékegység.

• Kötőjellel írt dátumok („2026-07-11"): a Safari nem hajlandó beolvasni a kötőjeles dátumokat abban a kódban, amelyet a Chrome elfogad. Az eredmény: üres naptárak vagy visszaszámlálók, kizárólag iPhone-on.

• Videó, ami nem indul el automatikusan: a Safari megköveteli, hogy a háttérvideó némítva legyen, és viselje a playsinline attribútumot, különben fekete marad.

• Üveghatások (backdrop-filter) és néhány animáció, amely Androidon jól néz ki, de a Safariban eltűnik.

• Beviteli mezők, amelyek hirtelen ránagyítanak gépelés közben, ha a szöveg túl kicsi.

Hogyan diagnosztizáld iPhone nélkül

Nincs feltétlenül szükséged iPhone-ra a probléma elkapásához, bár egy valódi eszközön való tesztelés még mindig a legbiztosabb megoldás.

• Kérdezz pontosan: kérd el az ügyfél iPhone-modelljét és iOS-verzióját, valamint egy képernyőképet vagy rövid videót. A „nem működik" semmit sem mond; az „az űrlap alatti gomb le van vágva iPhone 12-n" mindent elmond.

• Reprodukáld bármelyik Mac-en: a Safari bármelyik Mac-en szintén WebKitet használ, így sok hiba ott ugyanúgy megjelenik.

• Használd a Safari fejlesztői módját (Web Inspector), amely pontosan megmutatja, melyik szabály hibázik.

• Tesztelj elszigetelten: kapcsold ki az animációkat, a videót és az üveghatásokat egyenként. Amikor a probléma eltűnik, megtaláltad a tettest.

Az aranyszabály: előbb reprodukáld a problémát, aztán javítsd. A találgatásra alapozott javítások általában elrontanak valami mást.

Hogyan előzd meg az elejétől fogva

A legolcsóbb Safari-hiba az, amit soha meg sem írsz. Néhány alapelv, amely megkímél minket a meglepetésektől:

• Valódi iPhone-on tesztelünk INDÍTÁS ELŐTT, nem azután, hogy az ügyfelek panaszkodnak.

• Az egyszerű, bevált megoldásokat részesítjük előnyben a legújabb „trendi" trükkökkel szemben, amelyek csak Chrome-ban működnek.

• A helyes mértékegységeket és attribútumokat (dvh, playsinline, muted) használjuk az elejétől fogva.

• Kerüljük a nehéz animációkat, amelyek kiszámíthatatlanul viselkednek a különböző motorokon.

Ezért az MPO Web Studio-nál először egy ingyenes demót építünk az oldaladról, és teszteljük iPhone-on és Androidon, mielőtt egyáltalán pénzről beszélnénk. Látod a valódi eredményt, a saját telefonodon, nem egy ígéretet. Teljesen távolról dolgozunk, országszerte, átlátható árazással.