Numer telefonu niewidoczny na iPhone?

Dlaczego numer telefonu nie wyświetlał się na iPhone? Case study z mojej pracy w piątkowy wieczór

Każdy, kto pracuje z WordPressem, wie, że weekend to pojęcie względne.
Piątkowy wieczór, wszyscy oglądają mecz Polska – Holandia , a ja… dopieszczam kolejny projekt strony www dla klienta.
I dobrze, że to zrobiłam, bo odkryłam kolejny z tych „uroczych” przypadków, które występują tylko na Safari na iPhone, a nigdzie indziej.

Objaw: numer telefonu znikający na Safari (tylko na iPhone!)

Strona wyglądała świetnie na:

• Chrome na komputerze,
• Chrome na Androidzie,
• Firefox,
• Edge,
• nawet na iPadzie…

Ale na iPhone – numer telefonu na czerwonym polu po prostu znikał.
Żadnego błędu, żadnych ostrzeżeń, żaden CSS nie wskazywał problemu.

Typowe: „u mnie działa”, klient widzi inaczej.
Webdesign level hard.

Diagnoza: Safari automatycznie zamienia numer na link „tel:”

Po dłuższej chwili okazało się, że problem wcale nie leżał w:

• HTML,
• CSS,
• UAGB (choć i on swoje dokłada),
• ani w overlayach, flexach czy z-indexach.

Winowajcą był… sam sposób zapisania numeru telefonu.

Safari na iOS automatycznie wykrywa numery i zawsze zamienia je na:

<a href="tel:+48123456789">…</a>

A potem nadaje im swój systemowy styl, który:

• ma inną kolorystykę (często szaro–niebieską),
• ma własne zasady kontrastu,
• w niektórych blokach UAGB potrafi „zniknąć”, bo Safari układa go pod tłem.

Najlepsze?
Jeśli numer był wpisany jako ciąg samych cyfr (np. 48731304833) – działał zawsze.
Jeśli zapisany normalnie, ładnie dla człowieka: +48 731 304 833 – znikał.

Safari robiło transformację na link i nadpisywało styl, przez co w połączeniu z UAGB Infoboxem – numer znikał jak Houdini.

Rozwiązanie: jedno proste zabezpieczenie CSS

Zamiast walczyć z iOS i kombinować z usuwaniem automatycznej detekcji numerów, wystarczy dodać:

a[href^="tel"] {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 800;
}

Safari nadal zamienia numer na link, ale dzięki temu:

• kolor jest wymuszony,
• kontrast działa,
• nic nie „chowa się” pod tłem,
• numer jest nadal klikalny, tak jak powinien być na mobile.

Dlaczego warto o tym wiedzieć?

Bo to kolejny z tych problemów, które:

• nie pojawiają się w emulatorach,
• nie reprodukują się na desktopach,
• nie są zgłaszane w przeglądarce DevTools,
• występują tylko na prawdziwym iPhone.

A że ruch mobilny iPhone → 50–65% w wielu branżach…
To warto o takie „drobnostki” dbać.

Podsumowanie

Jeżeli:

• masz numer telefonu na stronie,
• używasz UAGB / Spectra,
• masz kolorowe tło,
• a klient mówi, że „nie widzi numeru na iPhone”

…to w 90% przypadków problemem jest automatyczna stylizacja linków „tel:” przez Safari.

Jeden fragment CSS potrafi uratować dzień.
I piątkowy późny wieczór…