Lors de ma dernière intégration Web, j’ai pu constater que la plupart des navigateurs interprétait parfaitement mon code sauf Safari sur iphone .

Sur Safari en effet, mes images alors même qu’elles étaient en 100%, dépassaient systématiquement de l’écran; en portrait ou en paysage.

4 heures de recherches intensives et de tests m’ont permis de résoudre mon problème d’affichage en 4 petites lignes de codes dans mon fichier css (grrrr).

Du coup c’est cadeau:

1/ un hack css dédié à Safari 9 :

@supports (overflow:-webkit-marquee) and (justify-content:inherit) {
/* type your custom css code here */
}

Le manitou du hack css : https://jeffclayton.wordpress.com

2/ Une astuce qui consiste à dimensionner sa balise html à 100%. Une sorte de reset quoi.

L’article qui m’a inspiré: iOS safari resizing issues

Résultat:

Afin de ne pas perturber les autres navigateurs on écrira donc:

@supports (overflow:-webkit-marquee) and (justify-content:inherit) {
html {width:100%; height:100%;}
}