Désalignment simple / sous-pixel de divs sur ipad et iphone safari

J'ai la situation suivante, et j'ai besoin d'aide …

  1. Deux divs, même taille, même location, l'un sur l'autre
  2. Tout fonctionne comme prévu sur les browsers de bureau
  3. Sur l'iphone / ipad une ligne faible apparaît autour de la frontière des divs
  4. Cette ligne faible n'est pas toujours sur les quatre frontières. Cela change en fonction de l'location des divs. Il semble que cela se produise parce que les deux divs ne se sont pas alignés correctement, mais selon leur style, ils sont de taille et d'location identiques.

Vous pouvez voir les résultats ici: http://www.thoughtartistry.com

Des idées?

J'ai eu un problème similaire dans un projet récent où j'avais des masques d'image de fond avec une couleur de fond différente pour coloriser les icons résultantes dans Safari mobile. Le problème était que lorsque la page était réduite par Safari, il y avait une ligne de couleur d'arrière-plan autour de l'image, même si elle devait être masquée. Je n'ai jamais trouvé un moyen d'empêcher cette fuite de la couleur d'arrière-plan lorsque la page est réduite. Il s'agit clairement d'une erreur dans les algorithms de Safari mobiles qui recalculent l'arrière-plan et le masque. J'ai trouvé une solution de contournement: j'ai mis un contour sur l'élément avec la même couleur que l'arrière-plan du parent de l'élément. Le contour est en dehors de l'élément et masque donc la partie qui saigne. Si le parent de votre élément a un arrière-plan drastique, cela ne fonctionnera pas très bien, mais s'il s'agit d'une couleur unie, tout ira bien.

Une marge négative est le seul moyen que j'ai trouvé pour empêcher cela.

Par exemple, si vous avez un léger écart horizontal entre deux divs, l'ajout d'une marge supérieure de -1px à la seconde div la fera légèrement se chevaucher et l'écart ne réapparaîtra pas lorsque la page sera mise à l'échelle.

Certaines situations (comme les sprites d'images ou les répétitions d'images) peuvent nécessiter un peu plus de peaufinage, mais l'idée générale est la même. Pour un sprite, assurez-vous qu'il n'y a pas de gros changement de couleur à less de 1 pixel de la bordure de recadrage. Le saignement n'est jamais supérieur à 1 pixel, donc un ajustement de 1 pixel suffit.

Le problème n'est pas seulement avec les divs qui s'associent, mais aussi avec les sprites d'image.

J'ai suivi le conseil dans ce fil de réglage échelle de la window initiale à 1,0. Le bug du sous-pixel avait disparu, mais j'ai ensuite testé mon site sur d'autres appareils, comme Android, et réalisé qu'une page en taille réelle est agaçante, puisque les users doivent resize chaque fois qu'il est chargé. J'ai donc préféré désactiver la balance et attendre que Apple la corrige. Puis un jour, je pensais comment résoudre le problème avec les marges de la page, et je suis arrivé à cette solution simple en CSS:

 html { min-width: 1024px; } 

Les appareils capables de cette résolution, tels que l'iPad en position horizontale, régleront l'échelle du document sur 1.0. Dans mon cas, c'est une solution suffisante, car je peux montrer que la page fonctionne correctement, et le bug du sous-pixel est dans Safari / iOS, qui sera résolu dans le futur, je l'espère.

Cela dépend totalement de la situation de chacun, mais dans notre cas, nous utilisons des marges négatives telles que proposées par ce fil ou une ombre car le outline ne s'applique qu'à toutes les bordures et donc à toutes les bordures. outline-bottom n'existe pas.

 /* * Prevent faint lines between elements. * @link http://stackoverflow.com/questions/5832869 */ box-shadow: 0 1px 0 red; 

Des idées?

Si vous ne requestz que des idées, j'en ai quelques-unes. Si vous requestz une solution, je ne crois pas qu'il y en ait une.

Je vois la même chose avec mes sites Web. Le problème disparaît lorsque vous effectuez un zoom avant. Je crois que c'est simplement un problème avec la façon dont Mobile Safari rend les divs et les images réduites et je ne crois vraiment pas que nous puissions y remédier.

Disons que votre site / design a une largeur de 900 pixels. Vous avez une largeur de 900 px dans la ligne # 1 au-dessus de trois divs dans la rangée # 2, chacune de 300 px de large. Mis à l'échelle à 100% sur un PC de bureau, tout est parfait. Cependant pour l'iOS, le site est réduit à 320 px de large. Le div 900 px est réduit de 64,44%. Maintenant, lorsque vous redimensionnez chacun des divs de 300 px de 64,44%, vous obtenez 106,68 px chacun. Vous ne pouvez pas avoir une fraction de pixel, disons qu'ils sont arrondis à 107 px chacun. Trois de ces divs dans une rangée totalisent 321 pixels; ou 1 pixel de plus que la plus grande div au-dessus d'eux.

Mon explication est une simplification grossière puisque le zoom semble réduire ou éliminer le problème même si vous êtes toujours à less d'une relation de 1 à 1 pixel. Je suppose que tout ce que l'algorithm iOS corrige pour les erreurs d'arrondi fait un meilleur travail lorsque l'image globale est plus proche de la taille réelle (plus zoomée).


MODIFIER:

Je vois ce problème avec un div de 900 px de large (auto-height) contenant une tranche d'arrière-plan répétitive Y de 900 px de large au-dessus d'un autre div (hauteur fixe) contenant une image de fond de 900 px de large. Mon explication des erreurs d'arrondi ne semble pas tenir count directement de cette observation, bien que je persiste à croire que les algorithms de mise à l'échelle d'iOS sont à blâmer.

J'ai également résolu le problème d'écart de sous-pixel iOS (sur un site en plein écran) en utilisant overflow-x: hidden; pour arrêter le défilement latéral et l'échelle du sharepoint vue pour arrêter le zoom. J'ai aussi eu des divs de support fixés à la largeur: 101%; et tous les éléments / images divs à l'intérieur de set float: left ;. Cela signifie que les espaces de sous-pixels sont tous sur le site de gauche, mais poussés hors de la vue par le groupe div titulaire à 101% de largeur.

J'essaierais de jouer avec les options meta / viewport, en particulier en mettant l'échelle initiale à 1.0 et en désactivant le zoom user.

http://developer.apple.com/library/safari/ipad/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html

Supprimer "clear: both" (s'il y a) de div en dessous de l'écart.

J'ai aussi dû résoudre ça. Si vous utilisez Div's pour définir des sections seulement alors.

 //background.css .background-color { background-color: blue; } .background-color div { background-color: inherit; }