Ammettiamolo, non c’è niente di più irritante di aver appena messo online il nostro sito custom dopo averci sudato settimane; è bello, è responsive, è pulito, è impeccabile, l’abbiamo testato su tool come responsinator, l’abbiamo visto su Chrome, su Firefox, su Safari, su Opera, siamo addirittura andati a vederlo su vecchie versioni di IE; per non lasciare niente al caso l’abbiamo guardato sia su OS X che su Windows; non contenti abbiamo preso un telefono Android e tutto ok anche li e a un amico che ha il Galaxy tab abbiamo chiesto se ce lo poteva prestare due minuti per fare dei test. Tutto a meraviglia fino a quando…
…fino a quando non guardiamo il sito su un iPhone e ci bastano pochi istanti per immaginare che la stessa cosa stia succedendo anche su iPad.
Ebbene si: iOS ti odia, è bene che tu lo sappia.
La tua hero section con l’immagine fullsize non si vede, i tuoi campi form sono diversi, il submit è completamente diverso da come lo hai formattato, il parallax è scomparso. Che fare?
Purtroppo queste sono solo alcune delle problematiche comuni che possiamo riscontrare su iOS, il sistema operativo infatti traduce a modo suo alcune regole html/css e non risponde proprio ad altre. Niente che non si possa risolvere, del resto IE ci ha abituato tanti anni fa a dover ragionare su più fronti.
Il primo problema è determinato da una non interpretazione del parametro background-attachment: fixed che normalmente utilizziamo come valore per caricare le nostre immagini di sfondo fullsize di pari passo al parametro background-size: cover come vediamo in figura.
Questa tecnica viene usata per creare le hero section piuttosto che le sezioni con effetto parallax jQuery ma, dal momento che iOS non legge il valore fixed, al posto di queste vedremo solamente un grande spazio vuoto nei nostri device Apple. Per correggere questo bug ci basta intervenire sulle media queries del css e sovrascrivere il valore fixed con il valore scroll come da figura.
Questo piccolo accorgimento è più che sufficiente per risolvere questo spiacevole problema di visualizzazione.
Il secondo problema è riscontrabile negli input submit dei nostri form che iOS proprio non ne vuol sapere di formattare come gli altri sistemi operativi.
Anche questo problema è facilmente risolvibile utilizzando, al posto di input submit, il corrispettivo button submit.
Questo pulsante svolge le veci del nostro caro input con alcune piccole differenze come, ad esempio, la mancanza dell’attributo value per il testo sul pulsante. Questo bottone presenta infatti un marcatore di chiusura che, come in una textarea, ci permette di scrivere del testo al suo interno; questa opzione ci permette anche di poter inserire icone come quelle di font Awesome nei nostri pulsanti, cosa invece non possibile in un input data la presenza degli apici per l’inserimento del testo in un attributo.
Inutile dire che questo pulsante, al contrario del suo corrispettivo, è perfettamente riconosciuto e formattatile anche in iOS.
Esistono decine di piccole problematiche (se cosi possiamo chiamarle) di incompatibilità decisamente fastidiose tra i vari dispositivi e le scopriamo man mano che facciamo questo lavoro; l’ultima che mettiamo sul piatto in questo articolo riguarda Safari, Safari Mobile e Chrome for iOS. Questi browser infatti non leggono il parametro required di html che rende il campo di un form obbligatorio.
Questo non è un problema da poco, la non lettura di questo valore infatti permette l’invio di campi vuoti dal form seppure dichiarati obbligatori. Purtroppo in questo caso specifico non possiamo risolvere con del semplice codice html o css che sia ma dobbiamo avere delle competenze di programmazione per verificare il dato inviato lato server a prescindere da required.
In questo caso possiamo rivolgerci a un buon programmatore che ci aiuti nella gestione oppure è ora di fare uno dei nostri corsi di web design e farcelo da soli che dite?
A buon rendere.
Ancora nessun commento