web-dev-qa-db-ja.com

-transform：scaleは、ホバリング時に「点滅」を引き起こします

私は、css -transform属性を使用して、ホバー時に各「見本」をスケーリングするカタログに取り組んでいます。

これが私の問題です。一部のブラウザや特定のサイトでは、見本にカーソルを合わせると、ロールオーバーするとページが「点滅」します。問題を突き止めることもできません。あるサイトではSafariに固有である可能性があり、別のサイトではChromeでのみ発生する可能性があり、別のサイトではまったく問題ありません。

もっと情報があればいいのですが、他の誰かが同様の問題に遭遇したのかもしれません。

Screenshot of catalog

.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);
}

また、z-index属性を削除すると問題が解決するようですが、ホバースウォッチは他のスウォッチの後ろにあります。これはこのプロジェクトでは機能しません。

どんな考えでも大歓迎です。

htmlcsshoverz-indextransform
28
Tony Beninate

追加に成功しました

-webkit-backface-visibility: hidden;

問題のある要素に（.swatchあなたの場合）。

ただし、古いバージョンのChromeとSafariでテストして、他に何も壊れないことを確認してください。私の経験では、Safari4は特に大ファンではありません。

25
alalonde

私は今朝同じ問題を抱えていました。しかし、私は少し前にウェブ上で答えを見つけました。

点滅の問題を防ぐには、次のプロパティを.swatchクラスに配置します（:hoverには配置しません）。

-webkit-transform-style: preserve-3d;
9
Fábio ZC

position:relativeをposition:absoluteに変更するか、位置属性（top: x、left: y）を指定してみてください。

それがうまくいくかどうかはわかりません、ただそこに捨てるだけです。

1
Chris Fletcher

chromeのimages（img：hover）の上にマウスを置くと正常に動作します。次のように使用できます

.swatch img:hover

http://dinolatoga.com/2009/09/18/amazing-imag-hover-effects-with-webkit-and-css/

1
user1352888

Z-indexの代わりに不透明度を使用してみると同じ問題が発生しました

img:hover{
    opacity: 0;
}
0
Yuval

別のテーマでは、同じ効果がありました（awfullblink）。
しかし、それはホバーの原則ではありませんでした。それはドラッグ可能な領域にあり、iPadでできるだけスムーズにしたかった。この領域は元々、cssmargin-leftプロパティで移動されました。
次に、スムーズなレンダリングのために-webkit-transform '：' translate3d（X、Y、Z） 'を使用しました。

しかし、translated3dを使用すると、最初のドラッグで有名な瞬きが起こりました（iPadのみ）。

FábioZC のおかげで、-webkit-transform-style：preserve-3d;はまばたきを取り除くために完全に機能しました

-webkit-transform-style：preserve-3d と何が関係しているかについてもっと知りたい人のために。


元の問題に戻ると、これらは私の考えです。

  1. あなたはSafari＆Chrome（つまり、webkit）について言及しています。問題はそれらのブラウザだけにありますか？それは-webkitの疑わしいプロパティにつながります。

  2. もしそうなら、-webkit-backface-visibility：hidden;または-webkit-transform-style：preserve-3d ;はまだ試してみるのに良い候補です：

  3. それらを.swatchクラスに添付しましたか？ （ホバー状態ではありません。そうでない場合、アニメーションが直接再生されるため、遅すぎると見なされます）

  4. ページ全体が点滅しているとおっしゃいましたか？見本だけが影響を受けるはずなので、奇妙です。

0
PIIANTOM