Domyślnie, działanie overflow: scroll na iOS jest praktycznie nie do użytku. Na szczęście, można łatwo przełączyć je w tryb „momentum scrolling” typowy dla natywnych kontrolek w systemie iOS.
1 2 3 4 | .whatever { overflow-y: scroll; -webkit-overflow-scrolling: touch; } |
PS. Snippet z dedykacją dla Marty, która nigdy o nim nie pamięta ;)
To całkiem przyjemna funkcja, ale czasem safari się myli i tworzy link tam, gdzie nie powinno (nam dziś stworzyło link z numeru KRS i NIP).
Mobilne Safari robi nam psikusy. Kilka dni temu pisałem o dziwnym skalowaniu tekstu, dziś sposób na poprawne ostylowanie pól tekstowych i buttonów. Safari niestety domyślnie w nosie ma nasz CSS i do inputów dodaje na siłę border-radius i wewnętrzny cień.
Kilkukrotnie zdarzało mi się trafić na sytuację, kiedy przy budowie responsywnej strony zupełnie bez większego uzasadnienia część tekstu na stronie wyświetlanej na Safari pod iOS zmieniało swój rozmiar, pomimo zdefiniowanych reguł w ramach media queries. Oczywiście taki problem nie był widoczny na przeskalowanej przeglądarce desktopowej, więc zupełnie nie wiedziałem jak się zabrać do zdebugowania tego problemu. Na szczęście, poszukując desperacko rozwiązania trafiłem na taki parametr w CSS:
Warto zwrócić uwagę na zastosowane tutaj 100%. Problem rozwiązać może też ustawienie wartości „none”, przy czym to zablokuje skalowanie rozmiaru tekstu na przeglądarkach dektopowych poprzez „ctrl+/ctrl-” (lub „cmd+/cmd-” na OS X).
Więcej na ten temat na http://blog.55minutes.com/2012/04/iphone-text-resizing/