Esettanulmány a saját műhelyünkből: hogyan lett a gondosan megtervezett scroll-élményből olvashatatlan folt egyetlen böngészőben, mit tanultunk a nyomozásból, és miért nem elég a fejlesztői emulátor.
A weboldalunk új, animált scroll-élményét élesítettük. Asztali gépen makulátlan volt, a fejlesztői eszközök sem jeleztek semmit. Aztán a tulajdonos a saját iPhone-járól szólt: a címkék, a gombok és a záró szekció szövege elmosódott, mintha valaki fátylat húzott volna rá. Ugyanaz az oldal, ami a monitoron elegáns volt, a telefonján olvashatatlanná vált.
Ez a jelzés önmagában is tanulságos, de erről majd a végén. Előbb nézzük, mi történt valójában a képernyőn.
A dizájnban a szöveg mögé egy finom, elmosott réteget terveztünk. A cél az volt, hogy a háttér lágyan elhalványuljon a felirat mögött, így a szöveg akkor is jól olvasható maradjon, ha mozgalmas kép fut alatta. Ez a technika a modern böngészőkben a háttér elmosásán (backdrop-filter) és egy formára vágó maszkon alapul.
A baj ott kezdődött, hogy az iPhone böngészője, a Safari ezt a kombinációt félreértelmezte. A háttér elmosása helyett magát a szöveget mosta el. Vagyis pontosan azt tette homályossá, aminek élesnek kellett volna maradnia. Asztali gépen és androidos telefonon mindez tökéletesen működött, csak az Apple böngészőmotorján, a WebKiten csúszott félre.
Amikor egy hiba csak egyetlen böngészőben jelentkezik, az szinte mindig a böngészőmotor egyik ismert korlátja. Így volt ez most is. A jelenség egy dokumentált hiba: a WebKit hibakövetőjében a 142662-es bejelentés címe szerint a háttér-elmosással ellátott elemeket nem lehet levágni maszkkal vagy vágóúttal. Magyarul: amikor a kettő találkozik, a Safari nem tudja, meddig terjedjen az elmosás, és inkább a rossz réteget mossa el.
Az sem mellékes, hogy ez nem elszigetelt furcsaság. Ugyanezt a viselkedést más böngészőmotorok is ismerték: a Chromium projekt 974857-es bejelentése és a Firefox 1579957-es bejelentése is hasonló ütközést ír le: a Chromiumnál a maszk, a Firefoxnál a vágóút (clip-path) akad össze a háttér-elmosással. A WebKit eredeti hibáját ugyan még 2016-ban lezárták, a háttér-elmosás és a maszk együttműködése a motoron azóta is kényes terület maradt, ahogy a következő pont is mutatja.
Nem teljesen. Kézenfekvő lenne azt gondolni, hogy a legfrissebb Safari már rendben kezeli, de a valóság árnyaltabb. A böngészők kompatibilitási adatbázisának 25914-es bejegyzése szerint a Safari 18-ban sincs teljes támogatás: bizonyos esetekben továbbra is szükség van a régi, gyártó-specifikus jelölésre, és a CSS-változók sem használhatók szabadon ezen a téren. Éppen ezért nem elég feltételezni, hogy egy frissítés majd elintézi helyettünk. Meg kell nézni, valódi eszközön.
A megoldás nem az volt, hogy mindenhonnan kivesszük az elmosást. Az kár lett volna azért az eleganciáért, amit asztali gépen ad. Ehelyett a platformhoz igazítottuk a viselkedést: a WebKiten az elmosás kikapcsol, és a helyét egy egyszerű, színátmenetes réteg veszi át, ami ugyanúgy olvashatóvá teszi a szöveget, csak látványos elmosás nélkül. Asztali gépen és a hibát nem mutató böngészőkben marad az igényes, elmosott változat.
Ez a platform-fallback elve: a dizájn-elem ott, ahol a böngésző nem bírja, ne törjön össze, hanem szelíden egyszerűsödjön le egy olyan változatra, ami biztosan működik. A látogató így mindenhol jól olvasható oldalt kap, csak épp a legmodernebb eszközökön egy fokkal látványosabbat.
Az emulátor nem elég. A fejlesztői eszközök és a böngésző beépített telefon-nézete sok mindent megmutatnak, de a böngészőmotorok apró, valós eltéréseit gyakran csak egy igazi készülék hozza elő. Ez pedig nem elhanyagolható piac: a hazai mobillátogatók nagyjából ötöde Safari böngészővel érkezik, a Safari részesedése a StatCounter mérése szerint a magyar mobilböngésző-piacon 2026 közepén meghaladta a 21 százalékot.
A dizájn romoljon fokozatosan, ne törjön. Egy látványelemnek mindig legyen egyszerűbb tartaléka arra az esetre, ha a böngésző nem bírja a teljes változatot.
És egy őszinte pont: ezt a hibát nem a tesztelés találta meg, hanem a tulajdonos a saját telefonján. Ez nem szégyen, hanem tanulság. A valós használat mindig több szemszögből néz rá a termékre, mint bármelyik ellenőrzőlista, ezért érdemes a visszajelzéseket komolyan venni és gyorsan reagálni rájuk.
Ha a saját oldaladról nem vagy biztos benne, hogy telefonon is ugyanolyan igényes, mint asztali gépen, foglalj egy ingyenes konzultációt a weboldalunkon. Megnézzük együtt, hol csúszhat félre a megjelenés, és mit érdemes vele kezdeni.
Ha a saját oldaladra is átvinnéd, beszéljük át élőben.
Kérek egy ingyenes konzultációtIdőpontfoglalás →