Webkit animation est de quitter l'ordure pixels derrière l'écran

Le code suivant met une boîte blanche sur l'écran. Si vous exécutez ce code sur un iPad (vous pouvez ajuster les pixels de l'exécuter sur un iPhone, un de trop), lorsque vous touchez la boîte, il va filer hors de l'écran, et laissez une trace de blanc-ish pixels le long de son bord inférieur.

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-height, user-scalable=no, maximum-scale=1, minimum-scale=1" />
    <title>Line Bug Demo</title>
    <style>
body {
  background: black;
}
.panel {
  background: white;
  position: absolute;
  z-index: 2;
  width: 1000px;
  height: 500px;
  top: 34px;
  left: 12px;
  -webkit-border-radius: 20px;
  -webkit-transition: left 0.333s ease-in-out;
}
.panel.hide {
  left: -1000px;
}
    </style>
  </head>
  <body>
    <div class="panel" onclick="this.setAttribute('class', 'panel hide')"></div>
  </body>
</html>

La clé pour obtenir le bug est à l'aide d'un rayon des frontières, et de faire de l'animation. Si vous venez de sauter hors de l'écran, pas de sentier. Si il n'y a pas de frontière rayon, pas de sentier.

Voici les solutions de rechange que j'ai trouvé jusqu'à présent:

.panel.hide { -webkit-border-radius: 0; }

Laid, et pas vraiment pratique pour ma demande, parce que je suis d'animer le panneau à la fois dans et à l'extérieur, et je veux vraiment les coins arrondis quand il est sur l'écran.

L'autre:

.panel { -webkit-transform: translateZ(0); }

Qui met le panneau dans le matériel de pipeline, ce qui ne le compositing correctement. Bien que cela fonctionne avec cette simple démonstration, en utilisant le matériel de pipeline dans mon application web causes de mémoire des erreurs. (De la drastiques, énorme, immédiate de la variété.)

Toutes les autres idées de comment je pourrais me débarrasser de ce sentier?

  • Avez-vous essayé -webkit-backface-visibility: hidden;?
  • C'est équivalent à l'utilisation de translateZ(0). Il met les images dans le matériel de pipeline, ce qui résout le problème, mais les causes de mémoire dans mon application.
  • Probablement un ios bug. Avez-vous essayé d'animation avec jquery?
  • Bien sûr c'est un bug. Il n'a pas d'importance comment vous faire de l'animation.
  • C'est peut-être un bug bizarre avec l'interprétation de la CSS. Essayez de changer l' ".panneau {" dans votre CSS ".panneau .panel_hide {" puis changer ".le panneau.masquer {" à ".panel_hide {". Je suis curieux de voir si il fait une actualisation complète de la classe css "panneau de configuration" lorsque vous effectuez "ce.setAttribute ("class", panneau "cacher")". Peut-être le modifier: "cette.className = 'panel_hide';". Laissez-moi savoir comment cela fonctionne! (Je n'ai pas un appareil iOS T_T)
  • Non, ce n'est pas un problème de CSS. C'est un simple bug dans le moteur de composition. Dans certains cas, ils oublient de redessiner les pixels du contour quand les choses sont à animer. Depuis que j'ai posté cette question l'année dernière, j'ai vu plusieurs cas comme celui-ci. À la fois sous iOS et au bureau de Safari. Quelqu'un chez Apple a besoin de savoir à propos de fencepost conditions, ils sont en train de redessiner pixels <w <h au lieu de <=w, <=h.
  • Applw les gens vont pointer vers le gars à webkit en disant que c'est leur problème. Inutile de beaucoup.
  • Peu probable. Webkit n'est pas responsable pour le rendu, c'est de la responsabilité du navigateur qui utilise webkit. paulirish.com/2013/webkit-for-developers
  • Ne de les traduire(0) vous donnent la même erreur que translateZ(0)? Voici un exemple: jsfiddle.net/NSUA7
  • Je ne serais pas en mesure de dire à partir d'un violon, car le problème avec l'aide de traduire, c'est qu'il cause l'application réelle de mettre beaucoup trop de choses dans le matériel de tuyau, ce qui provoque une erreur de mémoire insuffisante. La question est donc, si l'animation d'un webkit transformer au lieu de l'animation de "gauche", serait la cause de tous ces trucs pour aller dans le pipeline, et que ce serait résoudre le problème. Je vais revenir à vous sur ce que...
  • Deuxième fois, ils demandent à ce. C'est un iOS bug. Pas de doute et pas de réponse.
  • C'est le genre d'une vieille question, mais ma réponse ici qui explique pourquoi. En bref, le Quartz, l'anti-aliasing peint une faible ligne de pixels semi-transparents qui se situent en dehors de la calcul de la hauteur et la largeur de l'élément, donc ils ne sont jamais effacés à repeindre et de construire chaque image d'animation. Je peux vous proposer une solution simple qui ne repose pas sur l'accélération matérielle, si vous voulez?
  • Oui, s'il vous plaît partager le simple non-GL fixer!
  • Super! Mon idée, tout simplement, est de forcer WebKit pour repeindre les pixels supplémentaires en augmentant le calcul des dimensions de la boîte par un pixel dans tous les sens. Malheureusement je n'ai pas un ancien appareil iOS pour tester, si ça ne vous dérange pas d'essayer quelques suggestions pour moi? Première suggestion: ajouter box-shadow: 0 0 1px rgba(0,0,0,.05); à la .panel jeu de règles. L'impact visuel doit être minime, mais il va forcer une rangée de pixels être peints sur chaque bord. (Si cela ne fonctionne pas, essayez d'augmenter l'alpha d'une touche.)
  • Autres notes: box-shadow ne force pas l'accélération matérielle, et tandis qu'elle peut avoir des implications sur les performances, il est généralement le seul à poser avec un plus grand rayon de flou.
  • Qui fonctionne. Si vous répétez votre commentaire en réponse, je vais vous donner la case verte!
  • Génial, merci @jesmith. Content que ça a fonctionné! 🙂

InformationsquelleAutor Joshua Smith | 2012-04-02
  1. 58

    La solution

    box-shadow: 0 0 1px rgba(0, 0, 0, 0.05);

    Vous pouvez utiliser la couleur de fond de votre boîte que l' box-shadow couleur si vous pensez que c'est trop sensible.

    Alternativement, selon ce réponse sur un problème similaire dans Chrome (grâce à Sebastian dans les commentaires pour le tip-off), vous pouvez essayer:

    outline: 1px solid transparent;

    Ce qu'il se passe?

    J'ai donné un assez longue explication ailleurs, mais voici la version courte. Pour des raisons de performances, WebKit seulement repeint ceux d'une partie de page qu'il pense peut-être changé. Cependant, l'iOS (pré-7) Safari de mise en œuvre de la frontière rayon anti-alias de quelques pixels au-delà de l'calculé les dimensions d'une boîte. Depuis WebKit ne sais pas à propos de ces pixels, ils ne reçoivent pas redessiné; au lieu de cela, ils sont laissés pour compte et de construire sur chaque image d'animation.

    La solution habituelle—comme je l'ai suggéré dans mon autre réponse—est de la force de cet élément pour exiger l'accélération matérielle qu'il se peint comme une couche séparée. Toutefois, un trop grand nombre de petits éléments ou quelques gros résultat dans un grand nombre de tuiles à obtenir poussé à la GPU, avec d'évidentes implications sur les performances.

    À l'aide de box-shadow résout le problème de manière plus directe: elle s'étend de la repeindre dimensions de la boîte, forçant WebKit pour repeindre les pixels supplémentaires. L'connu implications sur les performances de box-shadow dans les navigateurs mobiles sont directement liés au rayon de flou utilisé, si un pixel de l'ombre devrait avoir peu d'effet.

    • Les travaux de cette. Je n'ai pas vu la dégradation de la performance. Notez que dans de traquer les liens dans votre réponse, j'ai appris que iOS 7 a, paraît-il fixe le sous-jacent de quartz bug.
    • J'ai vu quelqu'un observer autant dans un commentaire sur l'autre question, bien que je ne pouvais pas trouver un bon lien à une référence—si vous en avez un, je serais vraiment reconnaissante! En aparté, je me suis aventuré un peu plus profondément dans le WebKit de la source et de lire sur Quartz anti-aliasing pour voir si je pourrais le réduire encore, mais je ne suis pas encore à un point où je pourrais donner une confiance et précis de l'exposition.
    • Depuis iOS 7 est en version Bêta, et en vertu de la non-divulgation des règles, je pense que nous devrons simplement attendre.
    • Je suis déjà à l'aide de la boîte de l'ombre, mais un autre truc fait pour moi: Grâce à ce post: stackoverflow.com/a/12352196/807397 je suis en utilisant outline: 1px solid transparent; qui fonctionne comme un charme!
    • C'est soigné, et plus concis, merci pour le heads up! J'ai considéré que outline pourrait fonctionner, mais jamais eu le temps de le tester. Peut-être que je devrais mettre à jour ma réponse à un lien vers cette solution.
    • La magie noire, mais nom de dieu, qu'il fonctionne
    • Oh mon dieu. Ce qui est étonnant. Merci!!!!
    • contour fait, c'est encore pire, vieux -webkit-backface-visibility: hidden travaillé sur Chrome v60
    • Hmm, intéressant! Avez-vous essayé le box-shadow approche? Réglage backface-visibility va certainement supprimer les artefacts, mais il le fait par l'activation de l'accélération matérielle qui l'OP souhaité éviter. Si ce n'est pas un problème pour vous, il est parfaitement logique! 🙂
    • oui essayé, je suis de rayer mon dos ici cette solution est juste pour mon cas, afin de ne pas les essayer dans la production des gens 😛

    InformationsquelleAutor Jordan Gray
  2. 8

    Ce que je voudrais faire:

    • -webkit-backface-visibility: hidden
    • animer avec -webkit-transform:translateX(left value here) //ou translate-3d(x,y,z), gauche doit être désactivé [*]

    Assurez-vous de vérifier si l'activation de l'accélération matérielle sur parent ne fait aucune différence.

    Il y a aussi des façons simples de la force repeindre - laissez-moi savoir si vous avez besoin d'infos à leur sujet en tant que bien.

    [*] en s'appuyant sur les transformations 3d est un hack et doit être utilisé avec prudence, et il est nécessaire de trouver un compromis entre le GPU et la mémoire, dans certains cas, il peut causer de l'animation jank ou des problèmes de mémoire (pense - mobile, forçant l'accélération GPU sur de grandes surfaces).

    CSS will-change propriété sera un bon endroit pour marquer les propriétés qui pourrait être optimisée à l'avance.

    • -webkit-backface-visibility: hidden a fonctionné comme un charme! Merci beaucoup.
    • Grâce à celui-ci, j'ai gagné moi-même une Mangue Thé au Lait de mon ami. LOL!
    InformationsquelleAutor Rafal Pastuszak