Les sprites CSS ont foiré sur l'iphone

Question

J'ai remarqué que les sprites css semblent montrer 1 pixel de plus qu'ils ne le devraient en les visualisant sur l'iphone. Mon site fonctionne parfaitement sur tous les principaux navigateurs de bureau sur Mac et PC. Mais quand je le vois sur l'iphone, vous pouvez voir 1 pixel de l'image sprite adjacente.

Quelqu'un at-il déjà rencontré cela? Des suggestions sur la façon de résoudre ce problème? Je sais que je pourrais juste modifier tous mes sprites pour avoir plus de séparation entre eux, mais y a-t-il un moyen plus facile?

MISE À JOUR: zoom avec Safari Testé et remarqué le même problème se produit à certains niveaux de zoom sur safari bureau

Answer 1

Ajouter un autre 1px d'espace entre les icônes.

.: Éditer :. Je viens de remarquer que c'était l'une de vos solutions proposées. Vérifiez les éléments avec le sprite et assurez-vous qu'ils sont de la bonne taille. (Vérifiez le modèle de boîte de bordure rendu dans Firebug).

Cela pourrait avoir quelque chose à voir avec la façon dont le téléphone mobile rend les objets.

Answer 2

Mieux vaut tard que jamais:

Ce n'est pas un bug ou une faille du logiciel, il est des mathématiques simples: le (plus) iPhone affiche les sites à 980px de largeur sur un écran qui est 320px de large (en mode portrait). Donc c'est un problème d'arrondi: disons qu'un élément a une largeur de 50px. Il est affiché à environ un tiers de sa taille, et c'est à l'origine du problème: l'iPhone l'affichera à une largeur de 16px ou 17px. Même si c'était exactement un tiers, le problème resterait, et la même chose s'applique à divers niveaux de zoom, bien sûr.

Si c'est 16px, ça va - vous avez probablement remarqué que le problème ne se pose pas sur tous vos éléments. Si c'est 17px, cela signifie que l'élément est affiché légèrement plus grand que prévu, et l'image-objet adjacente s'affichera.

J'ai vérifié apple.om sur un iPhone 3G, et même leur barre de navigation montre des artefacts bizarres en bas - ils sont à peine perceptibles.

Donc en théorie, il devrait suffire d'ajouter 1px autour de chaque sprite. Avoir à changer tous ces éléments est décevant, mais cela semble être la meilleure solution. Le problème ne devrait pas disparaître non plus - l'iPhone 4 évolue évidemment encore, au moins en mode portrait. Sans parler de tous les autres smartphones avec des écrans bien inférieurs.