-transform:scale cause "clignotant" lors du survol

Je suis en train de travailler sur un catalogue qui utilise les feuilles de style css attribut transformer à l'échelle de chaque 'nuance' sur le curseur.

Voici mon problème: Dans certains navigateurs et sur certains sites, lorsque vous passez la souris sur le nuancier, il provoque la page de "blink" que votre rouleau sur eux. Je ne peux pas pointer du doigt le problème soit vers le bas, sur un site, elle peut être unique pour Safari, sur un autre, il peut se produire que dans Chrome, sur un autre, il est tout à fait correct.

Souhaite que j'avais plus d'information, mais peut-être quelqu'un d'autre a un problème similaire.

-transform:scale cause

.swatch {
  -webkit-box-shadow: #EFEFEF 2px 2px 0px;
  -webkit-transform: scale(1);
  -webkit-transition-duration: 0.2s;
  border: 1px solid white;
  position: relative;
  z-index: 1;

.swatch:hover {
  position:relative;
  z-index:10;
  transition-duration: 0.2s;
  transform:scale(1.8);
  -webkit-transition-duration: 0.2s;
  -webkit-transform:scale(1.8);
}

Il semble également que le problème sera résolu lors de la suppression de toute z-index attributs, mais alors le hover nuance est derrière les autres échantillons; ce qui ne fonctionne pas pour ce projet.

Toutes les pensées sont appréciés.

J'ai eu des problèmes similaires, et soupçonne que c'est à cause d'un glitch graphique implémentations pour chrome, que j'ai eu sur le dev construit (avec le matériel de l'acc), mais pas de la norme (sans).
"Je ne des ongles le problème soit vers le bas, sur un site, elle peut être unique pour Safari, sur un autre, il peut se produire que dans Chrome, sur un autre, il est parfaitement bien." Juste pour plus de clarté - avez-vous de créer un certain nombre de sites? Ou avez-vous créer un site unique qui vous sont à l'essai dans un certain nombre de différents navigateurs?
J'ai aussi vécu cela lors de l'essai de transitions sur diverses propriétés css3. Je soupçonne que c'est le Riche dit, quelques problèmes avec les navigateurs qui doit encore être peaufiné. Votre CSS semble sain. La seule chose que je pourrais recommander est de mettre la propriété transition sur l'élément principal, et non pas l'état de pointage.

InformationsquelleAutor Tony Beninate | 2011-06-13

25

J'ai eu du succès en ajoutant
```
-webkit-backface-visibility: hidden;
```
à l'élément concerné (.swatch dans votre cas).

Cependant, le tester dans les anciennes versions de google Chrome et Safari pour s'assurer qu'il ne se casse pas autre chose. Dans mon expérience, Safari 4 spécifiquement n'est pas un grand fan.
- Toutefois, cela provoque l'échelle du texte (-webkit-transform: scale(1.1);) à devenir floue, pour une raison inconnue.
- +1 pour ce faire, résolu cela n'est pas tellement léger problème. celui-ci ne serait pas de trop non plus.
- merci beaucoup. Cela a résolu mon problème
- Jusqu'à ce problème que aliz_bazar mentionne ci-dessus est résolu, ce backface visibilité astuce n'est pas une bonne solution.
InformationsquelleAutor alalonde
9

J'ai eu le même problème ce matin. Mais j'ai trouvé une réponse sur le web en quelques instants.

Pour éviter le Clignotement problème, placez le suivre bien sur votre .swatch classe (pas sur :hover):
```
-webkit-transform-style: preserve-3d;
```
- ce fixe pour moi. j'ai eu moins de "vieux navigateur webkit" avec ce code.
InformationsquelleAutor Fábio ZC
1

Essayez de changer position:relative à position:absolute, et/ou de spécifier des attributs de position (top: x, left: y.

Aucune idée si cela va fonctionner, juste le jeter là-bas.
- Merci pour tous les commentaires. J'ai mis en place un couple de ces suggestions, toujours sans succès. Je commence à penser qu'il peut tout simplement être pépins avec css3, google chrome, safari, et certaines configurations graphiques. @cfouche; pour répondre à votre question, je travail pour une société de logiciels et de nous fournir des logiciels à ses clients d'installer sur leurs sites web. C'est ce que je veux dire par " un certain nombre de différents site web. Ainsi, sur la même installation, il sera de retrouver sur un site web, mais de "brillance" sur un autre site. Bizarre, hein?
- C'est ce qui a résolu ce problème pour moi. Position absolue qui, je suppose lui donne un z-index qui trie les il.
- z-index est également possible sur par rapport les éléments, donc je ne suis pas sûr que votre évaluation est vrai.
InformationsquelleAutor Chris Fletcher
1

lorsque la souris sur les images(img:hover) dans chrome fonctionne très bien. vous pouvez l'utiliser comme ceci
```
.swatch img:hover
```
http://dinolatoga.com/2009/09/18/amazing-imag-hover-effects-with-webkit-and-css/

InformationsquelleAutor user1352888
0

J'ai eu le même problème, essayez d'utiliser l'opacité au lieu de z-index
```
img:hover{
    opacity: 0;
}
```
InformationsquelleAutor Yuval
0

Sur un autre sujet, j'ai eu le même effet (le moche clin).

Cependant, il n'était pas sur le vol stationnaire principes. C'était un dragable zone, je voulais aussi lisse que possible sur iPad. La zone a d'abord été déplacé par un css margin-left de la propriété.

Ensuite, j'ai utilisé -webkit-transform':'translate3d(X, Y, Z)' pour un rendu plus lisse, ce qui est le cas.

MAIS, l'utilisation de translated3d fait la renommée de clignotement, le premier de glisser (sur iPad uniquement).

Grâce à Fábio ZC, le -webkit-transform-style: preserve-3d; a parfaitement fonctionné pour se débarrasser de l'clin

Pour ceux qui veulent en savoir plus sur la -webkit-transform-style: preserve-3d et ce qui est en cause.

À l'origine du problème, ce sont mes pensées:
1. Vous mentionnez Safari & Chrome (donc, webkit). Le problème est que sur ces navigateurs? Ce qui conduirait à -webkit les biens suspects.
2. Si oui, -webkit-backface-visibility: hidden; ou -webkit-transform-style: preserve-3d; sont toujours de bons candidats pour être essayé:
3. Ne vous fixez-les sur le .swatch classe? (pas d'état de pointage, sinon, ils seront considérés comme trop tard, que l'animation sera jouée directement)
4. Vous avez déclaré que l'ensemble de la page est en train de clignoter? Aussi étrange que seuls les échantillons devraient être touchés.
InformationsquelleAutor PIIANTOM
-1

J'ai supprimé cette ligne de l'planant classe:
"display: none;" et étonnamment, cela a fonctionné. L'essayer et l'espoir de résoudre votre problème.

InformationsquelleAutor PhilAppDevemlopment

Vous devez vous connecter pour publier un commentaire.

À l'origine du problème, ce sont mes pensées: