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.