web-dev-qa-db-fra.com

La transformation CSS provoque un scintillement dans Safari, mais uniquement lorsque le navigateur a une largeur> = 2000 pixels

Vous avez bien lu. Testé sur plusieurs machines au bureau et la seule différence entre les scénarios était la taille du navigateur. Un collègue l'a réduit à un sweet spot de 2000px. Et quand nous redimensionnons nos navigateurs pour avoir une largeur> = 2000 px et que nous survolons un élément avec une animation de transformation, divers éléments de la page - en particulier tout élément avec un arrière-plan dégradé CSS - clignotent. Inversement, si vous redimensionnez le navigateur pour qu'il ait une largeur <2000 pixels et que vous passez la souris sur ce même élément, aucun scintillement ne se produit.

Quelqu'un d'autre a vu ce comportement bizarre? Pourquoi 2000px est-il un nombre magique, et que se passe-t-il exactement à 2000px?

[~ # ~] note [~ # ~] - Je ne peux pas vraiment partager des captures d'écran/vidéos/liens car ce site n'est pas encore public, et le code est relativement inutile car cela semble être plus un problème de navigateur qu'autre chose.

NOTE 2 - Ma question ici concerne vraiment ce qui se passe exactement dans Safari à 2000 pixels, pas nécessairement comment corriger le scintillement avec backface-visibility ou translateZ ou similaire. La raison étant que nous utilisons -webkit-font-smoothing: subpixel-antialiased; généreusement sur tout le site et l'utilisation de l'une de ces astuces l'emporte sur cette propriété pour la page entière, en activant l'anticrénelage/niveaux de gris pour tout le texte.

EDIT - D'accord, désolé de ne pas l'avoir fait plus tôt. Voici un peu de code dans un jsFiddle qui devrait reproduire le problème: http://jsfiddle.net/brandondurham/ujPMK/embedded/result/

N'oubliez pas que Safari doit être réglé sur une largeur d'au moins 2000 pixels pour que cela se produise.

csscss3safaritransformcss-transitions
34
Brandon Durham

Frustrant hein?

Voir EDIT4 pour savoir pourquoi 2000px est un nombre magique.

Il y a deux ou trois choses que vous pouvez essayer.

  • Ajouter -webkit-transform-style: preserve-3d; aux éléments qui scintillent.

  • ajouter -webkit-backface-visibility: hidden; aux éléments qui sont
    vacillant.

  • déplacer l'élément d'animation en dehors du parent le scintillement
    éléments sont à l'intérieur.

[~ # ~] modifier [~ # ~] - Wesley Hales, a déclaré ici "J'ai rencontré un comportement délicat lors de l'application du matériel accélération vers des parties de la page déjà accélérées "

Il est difficile de vous aider à déboguer cela sans aucun code. Mais pour commencer, je vous suggère d'activer le mode débogage en safari. Écrivez "par défaut, écrivez com.Apple.Safari IncludeInternalDebugMenu -bool true" dans le terminal.

Après cela, un menu de débogage apparaîtra. Choisissez Drapeaux de dessin/composition> Afficher les bordures de composition.

Cela vous aidera à voir ce qui est rendu et à choisir ce qu'il faut mettre en accélération matérielle et ce qu'il faut laisser de côté.

EDIT2 - Cela vaut également la peine d'être vérifié: fast-animation-with-ios-webkit

Cela concerne les iOs, mais j'ai expérimenté que - dans certaines circonstances - les solutions qui fonctionnent sur iOs fonctionnent également sur osx.

EDIT3 - Si vous demandez simplement ce qui se passe quand sa taille est supérieure à 2000 pixels, je peux vous dire avec certitude que sur les iPhones, WebKit crée des textures qui ne sont pas plus grandes que 1024 par 1024, et si votre élément est plus grand que cela, il doit créer plusieurs textures.

Documentation sur les limitations de texture

Maintenant, quand ils le font sur iPhone, cela ne me surprendrait pas s'ils font la même chose sur OsX, mais a une limite plus élevée.

Je ne sais pas si c'est ton cas. Impossible de le dire sans aucun code.

EDIT4 - "L'implémentation dans TextureMapperTiledBackingStore est assez simple et n'est utilisée que pour contourner la limitation de taille de texture 2000x2000 dans OpenGL."

Donc, si votre élément est plus grand que 2000x2000, il doit créer plusieurs textures.

http://trac.webkit.org/wiki/CoordinatedGraphicsSystem

56
Spoeken

J'ai trouvé qu'en appliquant le -webkit-backface-visibility: hidden; À l'élément de traduction et la -webkit-transform: translate3d(0, 0, 0); à tous ses enfants, le scintillement disparaît ensuite.

Veuillez vous référer à Empêcher le scintillement lors de la transition de webkit de webkit-transform .

30
Rupam Datta

Si les polices scintillent, utilisez le CSS suivant:

html,body {
    -webkit-font-smoothing: antialiased;    
}
8
Eugenio Enko

J'ai remarqué qu'après avoir appliqué des éléments de transformation CSS3 dans Chrome semble un peu "croustillant" et le texte non aligné. Les solutions dans la réponse de Mathias n'ont aucun effet sur cela. Mais voici une chose étrange - après avoir appliqué les filtres de webkit (c'est-à-dire -webkit-filter: opacity(0.99999);), les éléments rendus correctement et les lettres dans le texte sont alignés. Mais après cela, ces éléments semblent un peu flous. Peut-être que cela a un effet sur votre scintillement.

2
Miljan Puzović

Tout d'abord, grâce aux excellentes solutions proposées ici. J'ai toujours pensé dans le passé qu'il devait y avoir quelque chose de mal avec mon code. Ce n'était pas le cas. J'ai également raisonné la frontière de 2000 pixels pour que les animations ne fonctionnent plus correctement. Merci à vous, j'ajoute maintenant

/*keep animation smooth in Safari above 2000px*/
@media ( min-width: 2000px ) {
    .boxContent {
        -webkit-backface-visibility: hidden;
    }
}

Je l'ai fait sous condition car, en fait, les images ne sont pas rendues anti-crénelées après l'ajout de la classe. À un autre endroit que j'ai fait

/*keep animation smooth in Safari above 2000px*/
.twothousand {
    -webkit-backface-visibility: hidden;
}

et ajouté et supprimé la classe supplémentaire via JQuery. Les transitions sont donc fluides et rendues une fois terminées (en supprimant à nouveau la classe) Un peu compliqué mais cela a bien fonctionné pour moi et rend finalement les animations dans Safari supérieures à 2000 px. Excellent travail, les gars !!

0
Garavani