28

これは、MountainLionのSafari6と最新のChromeで発生します。（OSXで確認済み、Windowsでは発生しない可能性があります）

例については、次のページを参照してください。

http://users.telenet.be/prullen/flicker2.html

マウスを画像のオンとオフにすばやく移動して、下のテキストを確認します。ちらつき/脈動が見られます。

関連するCSSは以下のとおりです。.outと.inクラスを変更できません。アイテムクラスのみ。

私はどこかでそれを修正するはずだと読んで追加しようとし-webkit-backface-visibility:hidden;ましたが、それは何の違いもありませんでした。

誰か手がかりがありますか？

ありがとう、ウェズリー

.out {                                      
   position:        relative;                                       
   display:        block;                                      
   margin:            0;                                      
   border:            0;
   padding:        0;                                      
   margin-left:    auto;                                       
   margin-right:    auto;                                      
   overflow:        hidden;    
 }
.in {                                   
   position:        relative;                                       
   display:        block;                                      
   margin:            0;                           
   padding:        0;                            
   border:            0;
   overflow:        hidden;
}
.item {
   margin: 60px;
   -webkit-transition: -webkit-transform .15s linear;
   -moz-transition: -moz-transform .15s linear;
   -o-transition: -o-transform .15s linear;
   transition: transform .15s linear;
   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -o-transform-style : preserve-3d;
   -ms-transform-style : preserve-3d;
}
.item:hover {
   -webkit-transform: scale(1.3) !important;
   -moz-transform: scale(1.3) !important;
   -o-transform: scale(1.3) !important;
   -ms-transform: scale(1.3) !important;
   transform: scale(1.3) !important;
}
4

3 に答える 3

45

同じ問題に直面しています。ホバーで要素を拡大縮小したいのですが、そうすると、ページ上のすべてのテキストがちらつきます。最新のChrome（21.0.1180.89）とOSXMountainLionも使用しています。

実際に追加

-webkit-backface-visibility: hidden;
-moz-backface-visibility:    hidden;
-ms-backface-visibility:     hidden;

影響を受ける要素に問題を解決します。

.inクラスと.outクラスは変更できないとおっしゃいましたが、別のクラス（.no-flicker）を追加して、影響を受ける要素で使用できる可能性があります。

注：これは実際にはChromeの問題を修正するのに役立つようですが、zポジショニングCSSプロパティでレイヤー化された要素がある場合、Safariでいくつかの問題が発生する可能性があることに注意してください。たとえば、私のサイトでは、クリーンアップしようとしているアニメーションスライドショーのスライドトランジションの背後でCSS要素がちらつきます。

于 2012-09-11T21:06:14.803 に答える
13

同じ問題がありますが、修正してください。

.no-flickrプロジェクト内の点滅または点滅する要素にクラスを追加するだけです

.no-flickr {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
于 2014-08-26T23:06:23.820 に答える
6

今朝も同じ問題が発生しましたが、最善の解決策は次のとおりです。

-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;

これを、両面オブジェクトの面を構成する2つの要素のそれぞれに追加しました。Chromeのちらつきを止め、Safariで表示される背面を修正しました。

于 2013-01-14T23:49:03.967 に答える