Problèmes de CSS avec l'iPad

Problèmes de CSS avec l'iPad (le 29/06/2012)

Voici quelques bugs de rendu sur iPad que j'ai pu recenser, avec des pistes de solutions.

Les tests ont été effectués avec un iPad 1, iPad 2 et iPad 3 mis à jour. Pour vous donner une idée du rendu correct, regardez les exemples avec Firefox, et essayez sur iPad ensuite, vous allez avoir des surprises.

Les marges négatives

Si vous voulez centrer du contenu de largeur fixe, il peut vous arriver d'utiliser les marges négatives. Le principe est simple, pour centrer un contenu de 1000px de large :

left:50%;
margin-left:-500px;

(j'ai volontairement omis les informations pour position, le but n'est pas de réexpliquer la méthode mais de la tester)

Si vous hésitiez à utiliser encore cette méthode, n'hésitez plus, oubliez-la : un exemple de bug avec un contenu centré par marges négatives (j'ai centré un des blocs avec cette méthode, observez le résultat).

Ajout : Capture d'écran du problème de marges négatives sur iPad.

À noter, ce bug apparait uniquement sur des contenus de plus de 768 pixels de large, voyez un exemple de marges négatives avec un contenu de moins de 768px de large.

En conclusion, oubliez cette méthode : déjà, il sera rare que vous intégriez un site uniquement pour iPad, il y a de grandes chances que vous deviez l'adapter pour les smartphones. Le problème pour l'iPad va se répéter pour les smartphones et de manière générale pour les résolutions inférieures, donc, j'insiste, oubliez les marges négatives.

Les marges auto

Toujours dans l'optique de centrer un contenu de taille fixe, une autre méthode consiste à utiliser les marges automatiques :

margin:0 auto;

Cela fonctionne parfaitement dans le cas où vous avez plusieurs blocs de la même largeur, comme dans cet exemple : Les marges auto, idéales pour des contenus de même largeur.

Toutefois, il peut arriver que votre graphiste chéri fasse une maquette dont les blocs ne sont pas tous de la même largeur, imaginons que le bloc central soit plus large pour contenir une image de fond. Et là, vous allez avoir une grosse surprise sur iPad : les marges auto, attention en cas de contenus de largeur différentes.

Ajout : Capture d'écran du problème de marges auto sur iPad.

Une première solution consiste à entourer les blocs moins larges de blocs ayant la même taille que le plus large des blocs. Voici un exemple de cette solution : les marges auto, solution en cas de largeurs différentes.

Ajout : Capture d'écran du problème de marges auto sur iPad, réglé.

Une autre solution est d'adapter les largeur de ces blocs avec des media-queries. C'est pratique si vous souhaitez bénéficier de la largeur d'un écran d'ordinateur classique, et adapter aux résolutions moindres (comme celles des tablettes).

En conclusion, au prix d'une surcharge de code très modique, il est assez aisé de se sortir de ce problème. Les média-queries permettent également de se sortir aisément de ce genre de soucis.

Ajout : mettre initial-scale=1 dans le viewport ne solutionne pas ce problème.

Problème de l'orientation avec height=device-height dans le viewport

Un simple exemple : Problème d'orientation avec height=device-height. Normalement, selon que la tablette soit en portrait ou en paysage, le texte devrait être respectivement en bleu ou en rouge.

#text{
color:#0f0;
}
@media screen and (max-width:1024px) and (orientation:landscape){
#text{
color:#f00;
}
}
@media screen and (max-width:1024px) and (orientation:portrait){
#text{
color:#00f;
}
}

Or, si vous regardez l'exemple sur un iPad, il reste en bleu dans les deux cas.

Ajout : après la confirmation de Victor Brito en commentaire, le bug concerne bien aussi les iPad 1 mis à jour.

Le problème ne vient pas de la CSS, mais d'un problème de viewport. Le même exemple sans height=device-height dans le viewport fonctionne parfaitement sur iPad.

Nouveau : les 5 flottants à 20% ne font pas 100%

Honnêtement, je ne me l'explique pas. Prenez une simple liste qui fait 100% de largeur, contenant 5 items flottants de 20% de largeur : les 5 flottants à 20% ne font pas 100%. Sur n'importe quel navigateur classique, cela marche. Essayez sur iPad avec cet exemple, les 5 items ne feront pas toute la largeur.

Seule solution que j'ai pu trouver, utiliser le positionnement en display: table; et display: table-cell;, et là, ça marche. Si quelqu'un a une piste, je suis preneur !

Ajout : Capture d'écran du problème des flottants sur iPad, avec sa solution.

En espérant que cela vous aide à ne pas tomber dans ces pièges énervants !

Ajout : d'après les premiers essais de Thierry Binder, les mêmes bugs sont présents sous Chrome sous iOS.

Édition suite à la mise à jour iOS 6 : tous ces problèmes et leurs solutions sont toujours valables sur iOS 6.

Édition suite à la mise à jour iOS 7 : tous ces problèmes et leurs solutions sont toujours valables sur iOS 7.

Édition suite à la mise à jour iOS 7.1 : tous ces problèmes et leurs solutions sont toujours valables sur iOS 7.1.

Édition suite à la mise à jour iOS 8 : « les 5 flottants à 20% ne font pas 100% » semble être réglé. Tous les problèmes et leurs solutions sont toujours valables sur iOS 8.

Édition suite à la mise à jour iOS 9 : « les 5 flottants à 20% ne font pas 100% » ainsi que « le problème de l'orientation » semblent être réglés. Tous les problèmes et leurs solutions sont toujours valables sur iOS 9.

Permalien :

Flux RSS des commentaires de ce billet : https://www.nicolas-hoffmann.net/rss/commentaires.php?id_news=1487

9 commentaires

Posté par ReBleach le 30/06/2012 à 11:09:05
Sympathique comme article bien que je n'ai rencontré aucun de ces bugs... Pas assez d'intégration iPad de mon côté.

Par contre j'ai un bug bizarre sur un de mes sites. D'une le site ne se charge pas en plein écran (il est à moitié zoomé), et de ce fait le background ne s'étend pas sur la partie cachée par le zoom, le rendu est assez moche du coup. Il va falloir que je regarde côté du Viewport mais il me semble que j'ai utilisé toutes les metas. Bref le nombre de bug est assez important je pense. J'espère que c'est un article évolutif car tu vas pouvoir en rajouter à la longue...

Bonne journée.
Posté par Victor Brito le 30/06/2012 à 14:45:36
En ce qui concerne le problème constaté avec le paramètre height=device-height du viewport, je le constate également sur mon iPad 1 (iOS étant à jour) : le texte est bleu dans les deux orientations, le changement de couleur ne se produisant que si ce paramètre est viré. À mon avis, il s'agit moins d'un problème de génération de tablette que de la version de Safari embarquée dans la version actuelle d'iOS.
Posté par Nico le 30/06/2012 à 16:06:04
Merci Victor, je corrige de suite !
Posté par Dren le 19/09/2013 à 15:56:35
Petite remarque, un reset des propriété CSS a t il été appliqué ?
genre une méthode comme normalize.css ?
Posté par Nico le 19/09/2013 à 16:05:03
Dren : je viens d'essayer, ça n'y change rien. (sourire)
Posté par Dren le 19/09/2013 à 16:08:44
J'ai pas mon ipad sous la main (enfin si mais la batterie est out).
Je veux constater les bugs que je ne connaissais pas merci de l'info !!
Posté par Nico le 19/09/2013 à 16:15:49
Je t'en prie, constate, constate. Normalement, c'est confirmé sur tous les iPad, de iOS 5 à 7. (clin d’oeil)
Posté par viki53 le 17/03/2014 à 12:17:10
Le bug des 20% ressemble à un bon gros problème d'arrondi des pixels dans le calcul. Voire à une troncature.
Du style 758/5 = 151,6. Ce serait pas étonnant que ces cons là aient décidé d'utiliser la valeur entière plutôt que l'arrondi. Ou coup ça donne 151*5 = 755 pixels de large.
Posté par Nico le 17/03/2014 à 16:45:05
Je sais que Chrome/webKit a qq soucis avec les arrondis, il suffit de redimensionner 5*20% pour voir qq curiosités, littérallement, les divs tremblent ^^

Ajouter un commentaire









L'option « Se souvenir de mes informations » utilise un cookie, elle ne sera pas effective si vous les avez désactivés.

Les balises HTML ne seront pas interprétées, il est donc inutile d'en mettre. Par contre, les sauts de lignes de votre commentaire seront pris en compte, ne mettez donc pas de <br />, le site s'en chargera. Bien sûr, un commentaire vide ne sera pas ajouté !

L'auteur (autrement dit moi) n'est pas responsable des éventuelles fautes d'orthographe dans les commentaires.
Tout propos raciste et/ou insultant sera supprimé sans préavis. Les commentaires hors de propos destinés à faire de la pub pour des sites seront également supprimés sans ménagement.

Je vous prie de me pardonner, j'ai énormément de mal à lire le "langage" SMS, il n'est donc pas du tout interdit de s'abstenir de l'utiliser. Qui plus est, vous avez sûrement un clavier digne de ce nom et pas celui d'un téléphone portable. Ne vous gênez pas pour utiliser l'option "Prévisualiser" si vous voulez vous relire avant de poster, je vous en remercie d'avance !

Cet article a été écrit par Nicolas Hoffmann.

Ce site est la propriété de Nicolas Hoffmann.
Tous droits réservés, les textes du blog sont publiés sous licence CC BY-NC-SA.