The weirdest bug

Nem tudom, hogy ilyen bug-gal összehozott-e már a sors valaha is. két és fél napom ment rá, mire megtaláltam. Tegyük hozzá, hogy nem egy házi projectről van szó, hanem egy piacvezető cég websitejáról, mielőtt valaki kiröhögne, hogy ennyi idő kellett hozzá. A történet még pénteken délután kezdődött…

Amikor a cégnél menetrend szerint mindenki belevág a Friday Afternoon projectjébe, odajött hozzám a team lead-em és szólt, hogy találta a QA egy bug-ot, ami front-end gyanús és amit minél előbb (értsd ASAP) meg kéne oldani, mivel nemsokára release lesz. No hát akkor a pénteki mókának lőttek és nekiálltam a hibakeresésnek.

A probléma a következő volt: Ha iPad-en a site-on a bejelentkezett felhasználó egy ismertető oldalon megnyit egy jQuery modal window-t, ahol több opció közül egy Google Drive File Picker választva megnyílik az, akkor a file listában nem tud kijelölni file-t. Hiába bök rá a file nevére vagy a checkbox-ra, nem történik semmi. Csak azt láttam, hogy az érintést érzékelte az oldal a megfelelő helyen, a checkbox kijelölés aktívá vált, de a pipa nem került bele. Valamint ami még furcsa volt, hogy a picker-t megjelnítő gombra kétszer kellett „nyomni”, hogy elinduljon az event. Ugyanakkor ez a partial view a hozzá tartozó JS kódommal együtt egy másik aloldalon működött, mint az álom!!!

Ezen a nyomon elindulva kilőttem minden binding-ot, ami az oldalon eddig a pontig betöltődött. De így sem oldódott meg a probléma. Következő lépésként az összes z-index-et megvizsgáltam, hátha valami overlapping van valahol -bár ezt azért gondolatban eleve kizártam-, sosem lehet tudni alapon. Ez sem segített. próbáltam szisztematikusan kikommentelni a javascript dolgokat… előbb a sima jQuery-ket, aztán a bonyolultab knockout kódokat, viewmodel-t, stb. Semmi nem segített. Aztán a brutálisabb megoldások jöttek… Elkezdtem kiirtani a view-ból a tartalmat olyannyira, hogy a végén semmi nem maradt, csak egy <p>test</p> kóddarab. Még így sem működött. Nem hittem a szememnek. És akkor jött a ráeszmélés, amikor a két, működő és nem működő oldalt egymás mellé raktam… a hiba egy szinttel feljebb lesz. A layoutban. Azon belül is egy másik partial view-ban találtam meg a problémás részt. Bár nem értettem, hogy miért okozott „az” a dolog ilyen hibát…

„A” hiba a következő volt: egy input mező típusa „search” volt. Ennyi. Ez szívatott 2 és fél napon keresztül. Emiatt túrtam át kimondhatatlanul sok js kódot, debug-goltam, bind kódokat kutattam, kerestem, CSS-t faragtam, mindent… Kijavítottam, örültem, de idegesített a miért. Hiszen az még mindig nem volt világos. Kollégámmal utánatúrtunk guglin. És olyat találtunk, hogy csak pislogtunk. Abban az esetben, ha az oldalon egyszerre megtalálható egy search típusú input mező ÉS a CSS kódban egy globálisan deklarált :hover definíció (nem érdekes, hogy a definiált szelektor létező elem-e), akkor minden iOS eszközön lévő Safari megbolondul úgy, hogy duplán kell „kattintani” a linkre/gombra, hogy az eredeti event lefusson. Első kattintásnál csak a „hover” állapotba kerül. Azt hittem, hogy rosszul látok! Kipróbáltam iOS 6.x és 7.x verziókon is. Mindenhol előjött.

Tömören

Ne használj az oldalon egy időben input[type=”search”] és ‘selector :hover’ vagy *:hover CSS kódot, mert különben iOS Safariban duplán kell „kattintani” a linkre/gombra, hogy az tegye, amit eredetileg tennie kéne!

Még tömörebben

Megoldás(ok)

• Használjuk a hover definíciót a lehető legspecifikusabban!
• Vásároljuk fel az Apple-t és rúgjuk ki a felelőst
• Várjuk meg a javítást
• Váltsunk szakmát

És itt egy példakód, ha valaki ki akarja próbálni:

Végezetül egy hasonló, ámde mégis kicsit más, ugyanakkor szintén kiborító bug, amit felfedeztek: Ha „search” típusú input mezőt használsz Symbolset fontkészlettel,  a fenti hibát produkálja a Safari.