Explication du bug CSS

Dans le header de ce site j’ai un css qui permet à une div avec un width de 100% d’avoir un background  positionné à 50% sur l’axe des x comme suit : 

#branding {
width:100%;
height:392px;
background-position: 50% 50%;
background-repeat: no-repeat;
}

Dans tous les navigateurs (Testé dans Chrome, Firefox, Safari, IE 8,9) ce CSS fonctionne parfaitement et permet d’avoir une image en background qui s’affichera toujours à 100% de la taille du navigateur. Il faut bien évidemment une image assez grande (1600px minimum) pour que l’effet soit réussit. MAIS sous Safari mobile, seule une partie du background s’affiche. Cela provient du viewport (partie affiché à l’écran) qui est différent sur IOS. Voici un lien à lire pour comprendre le viewport.

Résolution du bug en utilisant viewport

J’ai donc réussit à résoudre ce bug en ajoutant une meta qui permet de fixer la largeur du viewport désiré dans webkit mobile. En fait pour simplifier j’ai utiliser la largeur maximale du content de mon site. Cela donne dans le head de votre HTML : 

<meta name = "viewport" content = "width = 590">

Ce paramètre va permettre à Webkit de savoir la partie que vous souhaitez afficher à l’écran et va donc exécuter un « zoom » sur la largeur (width) que vous avez définie.

Conclusion 

Je pense que je vais intégrer cela dans tous mes développements car cela permet de toute façon de fixer la façon dont vous souhaitez que Webkit affiche vos pages sur un navigateur basé sur webkit (la plupart maintenant) en plus de résoudre certains bug CSS.