Site-ul merge pe Android dar nu pe iPhone/Safari — de ce și cum îl repar

E una dintre cele mai frustrante situații: îți deschizi site-ul pe telefonul tău Android și totul e perfect. Apoi un client îți trimite un screenshot făcut pe iPhone — butoane suprapuse, un video care nu pornește, text care iese din ecran. Ai impresia că site-ul e stricat pe jumătate, deși tu nu vezi nicio problemă.

Vestea bună: aproape întotdeauna nu e magie neagră, ci o diferență cunoscută între motoarele de browser. Safari (motorul WebKit) interpretează unele lucruri altfel decât Chrome. În acest articol îți explic de ce apar aceste diferențe, care sunt cele mai frecvente cauze concrete și cum le poți identifica și repara — chiar dacă nu ai un iPhone la îndemână.

De ce apare diferența: Safari nu e Chrome

Fiecare browser are un motor care transformă codul în ceea ce vezi pe ecran. Chrome, Edge, Brave și majoritatea browserelor de pe Android folosesc același motor, Blink. Safari — și, atenție, TOATE browserele de pe iPhone, inclusiv Chrome pentru iOS — folosesc obligatoriu motorul Apple, WebKit.

Asta e cheia pe care mulți proprietari o ratează: pe iPhone nu există Chrome adevărat. Dacă instalezi Chrome pe iPhone, dedesubt e tot Safari. Deci dacă ceva se strică pe iPhone, e o problemă de WebKit, indiferent de ce browser pare că folosește vizitatorul.

WebKit e mai strict și adoptă unele funcții mai târziu. Cod care merge pe Android pentru că Chrome iartă micile greșeli poate pica pe Safari, care e mai riguros cu regulile.

Cele mai frecvente cauze concrete

În experiența noastră, aproape toate problemele „doar pe iPhone" se reduc la câțiva vinovați care revin mereu:

• Înălțimea ecranului (100vh): pe iPhone bara Safari se ascunde și reapare, așa că 100vh e mai mare decât ecranul real — secțiunile „pe tot ecranul" ies din cadru. Soluția modernă e unitatea dvh.

• Data cu cratime („2026-07-11"): Safari refuză să citească datele scrise cu cratime în cod, iar Chrome le acceptă. Rezultat: calendare sau countdown-uri goale doar pe iPhone.

• Video care nu pornește automat: Safari cere ca video-ul de fundal să fie muted și cu atributul playsinline, altfel rămâne negru.

• Efecte de sticlă (backdrop-filter) și unele animații care apar corect pe Android și lipsesc pe Safari.

• Input-uri care fac zoom brusc când scrii, dacă textul e prea mic.

Cum diagnostichezi fără să ai iPhone

Nu ai nevoie neapărat de un iPhone ca să prinzi problema, deși un test pe un dispozitiv real rămâne cel mai sigur.

• Întreabă exact: cere clientului modelul de iPhone și versiunea de iOS, plus un screenshot sau un scurt clip. „Nu merge" nu spune nimic; „butonul de sub formular e tăiat pe iPhone 12" spune totul.

• Reproduce pe orice Mac: Safari de pe orice Mac folosește tot WebKit, deci multe bug-uri apar identic acolo.

• Folosește modul dezvoltator din Safari (Web Inspector), care îți arată exact ce regulă pică.

• Testează izolat: dezactivează pe rând animațiile, video-ul, efectele de sticlă. Când problema dispare, ai găsit vinovatul.

Regula de aur: reproduci întâi problema, apoi o repari. Reparațiile „pe ghicite" strică de obicei altceva.

Cum previi problema de la început

Cel mai ieftin bug pe Safari e cel pe care nu-l scrii niciodată. Câteva principii care ne scutesc de surprize:

• Testăm pe iPhone real ÎNAINTE de lansare, nu după ce reclamă clienții.

• Preferăm soluții simple și verificate în locul ultimelor trucuri „la modă" care merg doar pe Chrome.

• Folosim unitățile și atributele corecte (dvh, playsinline, muted) din start.

• Evităm animațiile grele care se comportă imprevizibil între motoare.

De asta, la MPO Web Studio, îți construim mai întâi un demo gratuit al site-ului tău și îl testăm pe iPhone și Android înainte să discutăm bani. Vezi rezultatul real, pe telefonul tău, nu o promisiune. Lucrăm integral remote, în toată țara, cu prețuri transparente.