web-dev-qa-db-ja.com

奇妙なCSS3移行（ちらつき）

ボタンにカーソルを合わせると、トランジションの開始時に最初に白いフラッシュが点灯します。ボタンにcss3トランジションを適用すると、ちらつきが発生するのはなぜですか？ 私のブラウザはGoogle Chromeです

こちらを参照

<button>Log In</button>​

CSS：

button {
    background: #ff3019;
    background: -moz-linear-gradient(top,  #ff3019 0%, #cf0404 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404));
    background: -webkit-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
    background: -o-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
    background: -ms-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
    background: linear-gradient(top,  #ff3019 0%,#cf0404 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );
    border:1px solid #890000;
    display:block;
    margin:0 auto;
    width:200px;
    padding:5px 0;
    border-radius:8px;
    color:#fff;
    font-weight:700;
    text-shadow:0 1px 1px #000+50;
    box-shadow:0 2px 3px #000+150;
    -webkit-transition:background linear .5s;
}
button:hover {
    background:#ff3019;
}
button:active {
    background:#cf0404;
}

htmlcsscss3css-transitions
34
Jürgen Paul

ちらつきを取り除きました。移行する要素に"-webkit-backface-visibility: hidden;"を追加します。ほら！

101
Miguel Ángel Arroyo Rosales

ミゲルは、面倒なフラッシュを修正する背面可視性について正しいです。ただし、変換スケールを使用しているため、SVGアニメーションはスケーリング後にシャープになりません。 backface-visiblityプロパティを使用しない場合はシャープです。

したがって、ぼやけたグラフィックのある素敵なアニメーション、または画面のフラッシュのある見栄えの良いグラフィックが得られます。

ただし、移行するオブジェクトの親に次の行を追加できます。これにより、画面の点滅が修正され、スケーリング後もグラフィックが鮮明にレンダリングされます。

-webkit-transform: translate3D(0, 0, 0);
10
JanTheHuman

現在、修正なしの問題だと思います。私も遊んでいる前にこれに遭遇し、それを動作させることができませんでした。単色を使用するのは問題ないように見えますが、背景画像で偽造することもできます。

ここに同様の質問： 勾配遷移のWebkitサポート

詳細： http://screenflicker.com/mike/code/transition-gradient/

4
Graham Conzett

あなたが気づいているちらつきは、実際にはボタンの背景色が透明に変更されていることです（したがって、ボタンが「点滅」するか、Fiddleでボディの背景色が白なので、白になります）。

まったく同じサイズ/高さ/背景色（グラデーションを含む）の別の要素の上にボタンを重ねると、「ちらつき」は目立ちません。

フィドルを使用した例については、こちらをご覧ください。 http://jsfiddle.net/hrDff/12/

それでも間違いなくバグ...

1
Funktr0n

問題は、Google ChromeおよびMicrosoft Edge Webブラウザーの線形グラデーションの背景から単色の背景色に切り替えることです。この問題を修正するには、同様の線形グラデーションを追加します擬似クラスの背景、この場合は：hoverと：active。jsfiddleで自分で試してみましたが、ボタンの上にホバーしている間はレンダリングが点滅しませんでした。

        background: -webkit-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
        background: -o-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
        background: -ms-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
        background: linear-gradient(top,  #ff3019 0%,#cf0404 100%);

線形グラデーションの上部の色を変更して、ホバー効果に顕著な変化を与えました。

 button:hover {
background: -webkit-linear-gradient(top,  #ff5e4c 0%,#cf0404 100%);
        background: -o-linear-gradient(top,  #ff5e4c 0%,#cf0404 100%);
        background: -ms-linear-gradient(top,  #ff5e4c 0%,#cf0404 100%);
        background: linear-gradient(top,  #ff5e4c 0%,#cf0404 100%);
   }

ChromeまたはMicrosoft Edgeのボタンにカーソルを合わせると、点滅に関する問題はもうありません。これが役立つことを願っています。

1
subutai5467

このリンクで修正されました。ちらつく要素のcssに行を追加するだけです。

http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit

1
Dave

同様の問題で、Janの提案は、1つを除くすべての背景画像の改善に役立ちました。 2つの矛盾するポジショニングルールに気づくことで、最後の1つがちらつくのを取り除きました。私はposition:static 1つのルールmargin-top:-3em（マイナス）および他のmargin-top:5em（プラス）。したがって、このような問題が発生した場合は、位置の一貫性を慎重に確認することをお勧めします。

あなたの場合、ミシェル、1秒から3秒の長い遅延でテストしてきました。グラデーションは実際には背景なしで始まり、表示されるのはページの背景です。この情報は、テストページの本文の背景を象牙から黒に変更することで取得しました。

黒い背景にグラデーションを試したところ、黒いステージ/フラッシュが得られました（3秒で見やすくなりました）。おそらく、ルールの順序をテストし、背景からではなくボディまたは親の背景からグラデーションが始まる理由を理解することも賢明です。

回避策は、ボタンの正確なサイズと形状でボタンの背景が赤のdivにボタンを設定することです。

0
Irene S.

私はこのような点滅を解決しました：

次のようなHTML：

<div class="pswp__item" style="display: block; transform: translate3d(464px, 0px, 0px);"><div class="pswp__zoom-wrap" style="transform: translate3d(87px, 248px, 0px) scale(0.57971);"><img class="pswp__img" src="/platform/advice/feedback/downloads?attachmentIds=1304495004557536" style="opacity: 1; width: 414px; height: 414px;"></div></div>

次のようなcss：

.pswp__zoom-wrap{
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.pswp__zoom-wrap *{
-webkit-backface-visibility: hidden!important;
backface-visibility: hidden!important;
}
.pswp__item{
transform: translate3D(0, 0, 0);
-webkit-transform: translate3D(0, 0, 0);
}
0
Youth overturn