Mince gris/noir lignes sur la page web affichée avec l'iPad

Nous trouvons l'iPad est l'affichage mince gris/noir lignes sur notre site. Il semble y avoir une certaine forme de mise à l'échelle-artefact sur le navigateur Safari mobile. J'ai fourni deux extraits de pages ci-dessous, avec le contraste tordu pour mettre en lumière le problème, malheureusement, parce que l'écran de l'iPad est assez bonne, ces lignes sont tout à fait remarquable.

Ils semblent aller et venir comme la page est agrandie, et ressemblent à des divs/les images sont en train d'être mis à l'échelle avec l'arrondi sur les bords, provoquant le bord de pixels pour être mélangé avec le noir.

Quelqu'un a trouvé une solution de contournement ou d'un correctif pour cela?

Grâce

Mince gris/noir lignes sur la page web affichée avec l'iPad

Mince gris/noir lignes sur la page web affichée avec l'iPad

Ressemble à stackoverflow.com/questions/3903106/..., mais il n'y a aucune suggestion sur cette question à propos d'une solution.

OriginalL'auteur Adam | 2011-01-24

  1. 12

    J'ai essayé un tas de correctifs pour supprimer ces gris-ish de petites lignes quand le mobile-safari a été agrandie, et la plus simple et la plus souple fix que j'ai trouvé est ici:

    http://www.oddodesign.com/2010/css-tip-how-to-prevent-div-seam-lines-from-appearing-in-apples-mobile-safari/

    Essentiellement, vous ajoutez

    margin-bottom:-1px;

    À des éléments qui sont arriver fantôme de la ligne de frontières.

    terrible "solution" au pixel près, des mises en pages précises
    la meilleure solution pour l'arrière-plan en dégradé sur mobile aussi

    OriginalL'auteur Jared Henderson

  2. 3

    L'iOS zoom semble prendre certaines données à partir de la ligne suivante dans l'image (peut-être l'erreur d'arrondi sur l'interpolation?). J'ai fait quelques tests, et il semble être un problème logique. J'ai signalé cela comme un bug à Apple.

    Ajoutant 1 la ligne de fond de couleur des pixels de l'image (ou padding 1px si vous voulez) semble faire l'affaire. Pas l'idéal, mais fonctionne.

    Éventuellement même problème que Le rendu des frontières bug dans Safari mobile sur Safari Mobile en général.

    OriginalL'auteur Marcus

  3. 2

    Si les réponses ci-dessus ne fonctionnent pas pour vous, car ils n'avaient pas pour moi, il y a une petite chose que vous pouvez essayer qui ne me résoudre problème:

    border-bottom: 1px transparent solid ;
margin-bottom: -1px ; /* for Mobile Safari dark line artifact */

    Ajouter une bordure une bordure transparente à la base semblait être d'aider, de mon raisonnement, c'est qu'il essaie toujours de rendre une frontière et même si c'est transparent, cela l'oblige à refaire le rendu de ces pixels. Cela, cependant, est une pure conjecture, mais la solution semble fonctionner!

    OriginalL'auteur Leonard

  4. 1

    Puisque c'est déclenché par la couleur d'arrière-plan il suffit d'utiliser un 1px gif bg image de la même couleur de fond et de le répéter. Si vous utilisez modernizr vous pouvez écrire quelque chose comme ceci:

    .touch .class-of-td {
    background: transparent url(../_img/services/1px-bgfix.gif) repeat;
    }

    Cela fonctionne aussi pour les éléments qui sont affichés table-cell pour obtenir vertical-align: middle.

    OriginalL'auteur Ian Venskus

  5. 1

    J'ai eu une couleur grisâtre ligne (iPad uniquement) au bas de ma barre d'en-tête et le fixe avec:

    position:relative;
z-index:2;

    directement ajouté à l'en-tête contenant.
    peut-être cela pourrait aussi aider quelqu'un.

    OriginalL'auteur silenzium

  6. 0

    L'ajout de cette dans le bloc au-dessus de la ligne de travaillé pour moi, très bien.

    margin-top:-1px; /* this overlap the blamed ghost line */
padding-top:1px; /* this gave me my pixel back =) */

    si sa vous arrive dans de trop nombreux blocs, vous devez créer une classe à la place.

    OriginalL'auteur Luis Rivera

  7. 0

    Si le <div> n'est pas de la même couleur que l'arrière-plan et est de couleur blanche, ce qui est très visible.

    Fondamentalement, la background-color dans le format doit être de la même couleur que le <div> assis sur le dessus d'ou vous aurez une ligne.

    Un travail simple est de changer le background-color pour correspondre à la <div> ou de créer une mosaïque qui permettra de couvrir les zones de l'arrière-plan où l' <div> s'asseoir.

    OriginalL'auteur johnny

  8. 0

    J'ai eu ce même problème avec 1px lignes montrant dans les navigateurs de bureau et sur l'iPad et l'iPhone.

    Ici était mon ancien css:

    html,body {

background:url(images/bg.jpg);
height:100%;
    background-color:#E8E8E8;
text-align:center;
text-decoration:none;
width:auto;

}

    Ma nouvelle css:

    html,body {

background:url(images/bg.jpg);
height:100%;
text-align:center;
text-decoration:none;
width:auto;

}

    Retrait "background-color:" a résolu ce problème avec l'ensemble de mes sites.

    OriginalL'auteur Steve

  9. 0

    Dans mon cas particulier, la délinquance de la div ne serait pas fixe avec margin:-1px ou à la frontière des tours.
    J'ai eu un div avec:

    height: 0px; 
padding-bottom: 57.2%;

    -- c'est une astuce pour créer un élément qui conserve ses proportions différentes largeurs, parce que le rembourrage haut/bas dérive le pourcentage de la largeur. Dans mon cas, j'ai été en mesure de le réparer en changeant ce:

    height: 1px; 
padding-bottom: 57.2%;

    IMPORTANT: il est intéressant de noter que j'ai trouvé un rafraîchissement de la délinquance de la page, même avec le changement des styles, n'a pas supprimé la ligne, même lorsque j'ai caché le corps*. Pour supprimer les lignes à chaque fois qu'ils sont revenus, j'ai dû redémarrer l'appareil.

    • ( body {display:none} qui est, non pas de falsification de preuves)

    OriginalL'auteur qwertyisms

  10. 0

    J'ai aussi eu le même problème dans ma page d'accueil et aucune de ces solutions n'a fonctionné pour moi. Dans mon cas particulier, il était l'arrière-plan montrant dans entre la div de couches que Johnny haut a dit. J'ai fini par envelopper les couches existantes avec un autre div et la même couleur de fond que les deux couches existantes et les lignes ne sont pas plus visibles. Si rien d'autre ne fonctionne lui donner un essai.

    OriginalL'auteur eric

  11. 0

    Nous avons eu une ligne blanche au fond d'une pleine page en iframe dans iPad, de sorte que nous venons de régler la hauteur à 100,5% et cela a résolu le problème.

    OriginalL'auteur Devin G Rhode