Comment faire pour forcer le rendre à nouveau après une WebKit transformation 3D dans Safari
Je suis en utilisant le CSS transformations 3D pour effectuer un zoom sur une div, par exemple:
-webkit-transform: scale3d(2,2,1);
La mise à l'échelle elle-même fonctionne très bien dans tous les navigateurs WebKit. Cependant, lors de l'utilisation de ce sur Safari (mobile ou Windows), le contenu de la div n'est pas un nouveau rendu. Le résultat est que le contenu devient floue après la mise à l'échelle.
Cet effet se produit uniquement lors de l'utilisation de transformations 3D. Tout fonctionne bien lors de l'utilisation de
-webkit-transform: scale(2);
.
Afin d'exploiter l'accélération matérielle sur iPhone/iPad, il serait bien d'utiliser les transformations 3D.
Quelqu'un sait comment dire à Safari de re-rendre un div avec la nouvelle échelle?
- Comment savez-vous que le navigateur n'est pas rendu le contenu de la DIV? Contient-il une image com
Vous devez vous connecter pour publier un commentaire.
La raison pour laquelle le texte est flou est que Webkit est de traiter le texte comme une image, je suppose que c'est le prix de l'accélération matérielle. Je suis en supposant que vous êtes à l'aide de transitions ou de l'animation d'images clés dans votre interface utilisateur, sinon, les gains de performance sont négligeables et vous devez passer à la non-transformations 3d.
Vous pouvez soit:
• Ajouter un eventlistener pour transitionend puis remplacer la transformation 3d pour une norme de transformation, tels que...
• Depuis Webkit traite des trucs comme une image, il est préférable de commencer à grande échelle et en bas. Donc, écrire votre code css dans votre "état final" et de l'échelle vers le bas pour votre état normal...
Et vous obtenez un croustillant de texte sur le vol stationnaire. J'ai fait une démo ici (fonctionne sur iOS trop):
http://duopixel.com/stack/scale.html
J'ai trouvé en essayant de forcer un renouvellement d'un div dans safari pour toute autre raison (recalculer text-overflow sur le vol stationnaire), c'est simple:
J'ai fait quelque chose sur le vol stationnaire qui modifie le rembourrage pour accueillir quelques boutons, mais dans safari/chorme il ne marche pas recalculer le contenu correctement, l'ajout de l' :après pseudoclass a fait le tour.
Noter que je n'ai pas trouvé nulle part sur internet, je l'ai découvert lorsque violon.
Je suis en train de faire la même chose. Je pense que ce qui se passe ici, c'est que Safari est juste mise à l'échelle des pixels. C'est, il fait toutes ses "normal" de rendu de navigateur et puis échelles de pixels que le résultat.
Exemple: Lieu relativement élevé de la qualité de l'image (dis 1000x1000 pixels) dans une petite div (200x200 pixels) et régler l'image à 100% de la largeur et de la hauteur. Lorsque vous 3D transformer la div à l'échelle 5 fois, le résultat sera floue dans Safari et croustillante dans Chrome. L'utilisation d'une transformation 2D et l'image apparaît nettement dans les deux.
Une solution de contournement est de se convertir à une transformation 2D après vous avez terminé avec la 3D. Cependant, j'ai trouvé il y a un léger retard lors de la conversion entre les transforme donc ce n'est pas trop bien pour moi.
Je ne pouvais pas trouver une solution pour faire des zoom-ins pas de flou dans Safari (bureau v7.0.2 et celui inclus dans iOS 6.1.3 et 7.0.6) mais je l'ai fait à un certain point, les avis que j'ai eu une forte png lorsque j'ai mis l'échelle de 5. Je ne sais pas pourquoi, depuis que la version de mon code est perdu dans tous les autres modifications que j'ai apportées. Tous les autres facteurs d'échelle étaient floues.
Depuis l'iPhone et l'iPad sont des dispositifs de cible de ce projet, j'ai fini par abandonner transformation d'échelle et d'animation de la hauteur de l'image à la place. Je suis déçu que l'équipe a décidé de mettre en œuvre des transformations de manière à en faire une option viable dans de nombreux cas.
Hmmm... j'obtiens le même problème en essayant de gravir les cartes de google images (hidpi) avec Chrome 53.
La seule solution que j'ai trouvé pour l'instant est de masquer l'image (ou un div qui contient les images), puis de l'afficher de nouveau. Peut être avec l'opacité=0 ou visibilité=masqué, mais c'est en fait d'être invisible pendant au moins une image ou deux.
Ce, d'ailleurs, n'est même pas une transformation 3d. Juste 2D choses.
Hmmm... j'obtiens le même problème en essayant de gravir les cartes de google images (hidpi) avec Chrome 53.
Une solution consiste à cacher (l'opacité, la visibilité) l'image de quelques images (ou d'un conteneur à l'habillage de l'image/images/quel qu'il soit)... la meilleure solution que j'ai trouvé dans un autre post sur ALORS, c'est (publié sur le DIV contenant):
BTW, mon sac était tout à fait ordinaire 2d choses, la translateZ semble faire la différence, même si je n'ai jamais touché à rien en 3d.