web-dev-qa-db-ja.com

CSS3変換により、SafariおよびFirefox MacYosemiteでテキストがちらつきます

SafariとFirefox（Mac/Yosemite）でこの奇妙な問題が発生しており、変換要素にカーソルを合わせると、ページ上のほとんどすべてのテキストがちらつきます。

Gifの例：（Firefox、ヨセミテ）

enter image description here

.usp {
   //USP has an icon that is defined below
    opacity: .4;
    @include transition(all .3s ease-in-out);


    &:hover { 
        opacity: 1;
        @include transition(all .3s ease-in-out);


        .icon {
            @include transform(scale(1.1));
            @include transition(all 1.7s ease-in-out);
        }
    } // :hover
} 

.usp .icon {
    display: block;
    height: 75px;
    width: 75px;
    // Insert background-image Sprite (removed from this example)
    @include transition(all .3s ease-in-out); 
    @include transform(scale(1.0));
}

私は次のことを試しました：

これらのスタイルの可能なすべての組み合わせを、ボディ、変換要素、および/またはその親に追加します

-webkit-transform-style:preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
 backface-visibility: hidden;
-webkit-filter: opacity(.9999);
-webkit-font-smoothing: antialiased;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
-webkit-font-smoothing: subpixel-antialiased;
-webkit-text-stroke: 0.35px;

（以下のスタイル）が本体に適用されている場合、問題はSafariで修正されますが、FirefoxはWebkitブラウザーではないため修正されません。

-webkit-transform: translate3d(0, 0, 0);
-webkit-text-stroke: 0.35px;

何が原因で、どうすれば修正できるのか、文字通りわかりません。

csstransformcss-transitionscss-transforms
14
Rick Doesburg

よし！

1週間のテスト、CSSルールの削除と追加の後、私はついに問題を解決する解決策を見つけました。私はもともとFirefox39とSafari9の両方でこの問題を抱えていましたが、Firefoxは最新のアップデートで不思議なことに修正されました。しかし、Safariはそうではありませんでした。問題は、ページ上の要素の3Dレンダリングに関係しています。私がスケーリングしようとした要素は3Dコンテキストに変換する必要があり、他の回答で@ Woodrow-Barlowが説明しているように、ページ上のちらつき要素が2Dと3Dの間で切り替わりました。

追加することにより

-webkit-transform: translate3d(0, 0, 0);

ちらつきのある要素に合わせて、ページの読み込み時に3Dでレンダリングするため、切り替える必要がなくなりました。

EDIT 1：他のブラウザでこの問題が発生している場合は、CSSの「will-change」プロパティを確認してください： https： //dev.opera.com/articles/css-will-change-property/

19
Rick Doesburg

OPへの注：あなたは少なくともこれらの概念のほとんどを知っているようですが、同様の問題を抱えている可能性のある他の人のために、この回答に多くの詳細を含めました。

専用のGPU（グラフィックスをレンダリングするためのプロセッサ）を搭載したコンピューターで実行されている最新のブラウザーでは、ブラウザーがWebページのレンダリングタスクをCPU（「通常の」プロセッサー）からGPUにシフトすることがあります。 CPUとGPUにはそれぞれ長所と短所があります。GPUの性質上、3次元変換を非常に効率的にレンダリングできますが、CPUほど鮮明にプレーンテキストをレンダリングできない場合があります。

ホバー効果は、ブラウザーがハードウェアアクセラレーションによるGPUレンダリングに適していると見なした変換（おそらくscale(1.1)変換によってトリガーされる）を使用しているため、ホバーアニメーション中にレンダリングを一時的にGPUにシフトしました/遷移が発生します。アニメーションが完了した後、CPUがレンダリングを再び引き継ぎます。ハードウェアのさまざまな部分で使用されるさまざまなレンダリング戦略のため、GPUが担当している間、テキストは異なって見えます（鮮明ではありません）。

残念ながら、CSSを介してハードウェアアクセラレーションを明示的に制御することは（まだ）ありません。ブラウザは必要に応じてそれを設定します。ただし、実行できることは、ブラウザをハードウェアアクセラレーションGPUモードにするいくつかのプロパティを設定することです疑わしい。ここでの理論は、アニメーションが発生していないときでもブラウザをGPUモードに維持するため、「ちらつき」が発生しないというものです。

この戦略にはいくつかの欠点があります。Webサイトにアクセスするユーザーは、ページが開いているときにRAMのメモリ使用量がわずかに増加し、モバイル/ラップトップユーザーはバッテリーの消耗がわずかに増加します。専用GPUを備えていないデバイスでは、ハードウェアアクセラレーションはトリガーされません（ただし、これらのデバイスでは、とにかく表示されている「ちらつき」は表示されません）。

ホバーされていない要素にscale(1.0)プロパティを追加することで、すでにこれを実行しようとしているようです。ブラウザが「賢く」なり、このルールが実行することを検出したと思います。何も無視しました。ハードウェアアクセラレーションをトリガーする最も信頼できる方法は、通常、Z軸での変換です。変換を次のように変更してみてください。

@include transform(scale(1.00001), translateZ(0.00001));

値「1」と「0」を使用するのではなく、非常に近い値を使用しています。うまくいけば、これはブラウザが「賢く」なり、ルールを無視するのを防ぐでしょう。

私はあなたのSassにベンダープレフィックスをしていることが含まれていると思います。最終出力に-webkit-transform:と-moz-transform:だけでなく、接頭辞のないtransform:構文も含まれていることを再確認してください。 （デバッグの目的で）確実にしたい場合は、手動で入力してください。

.usp .icon {
  transform: scale(1.00001), translateZ(0.00001);
  -webkit-transform: scale(1.00001), translateZ(0.00001);
  -moz-transform: scale(1.00001), translateZ(0.00001);
}

私の側では、フィドルで最初にちらつきを経験しなかったので（私のブラウザー/ OS /ハードウェア構成は2次元スケールがGPUに適しているとは思わない）、私はできませんこのコードをテストします。しかし、私は同じような問題を解決するために同じようなテクニックを頻繁に使用しました。

8
Woodrow Barlow

ああ、でもやってみた？

.usp .icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

http://jsfiddle.net/j04mayvb/4/

enter image description here

正直なところ、これが機能する理由はわかりませんが、SafariのFiddle）でちらつきが止まるのはわかります。

2
MattDiamant

OK！

そのため、私が直面した問題は、cssトランジションを使用してクロスボタンにホイール効果を与えるカスタムポップアップにありました。しかし、それはポップアップでちらつきの問題を引き起こしました。

さまざまなオンラインポータルにアクセスした後、私はその移行プロパティを知りました。

webkit-backface-visibility: hidden;

遷移した要素で実際に機能し、ちらつきを停止します。しかし、このプロパティを使用すると、私の場合はコンポーネント全体（ポップアップ）がぼやけ、それを止めるには、コンポーネントのルート要素で別のプロパティを使用する必要がありました。

webkit-transform: translate3d(0, 0, 0);

しかし、それを中央に保つためにすでにy方向に-50％変換されているカスタムポップアップで使用していたため、使用しないように制限されていました。

Cssプロパティを数日間試し、さまざまな解決策を試した後、遷移要素が使用されるコンポーネントの全高は[〜＃〜] even [〜＃〜]でなければならないという結論に達しました。動的データの場合は、全高が維持されるようにマージンとパディングを調整する必要があります[〜＃〜] even [〜＃〜]。

これで私の問題は解決しました。全高が[〜＃〜] even [〜＃〜]のままであることを確認し、それに応じてマージンとパディングを調整します。

それが困っている人にも役立つことを願っています。 :)

1
Avaneesh Tripathi

また、この問題を解決するために何週間も探しています。上記のようなあらゆる種類のトリックを使用して、要素を独自のGPUレイヤーに配置できます。ただし、これによりテキストがビットマップに変換されるため、ぼやけます。

私たちの場合、問題は偶数ピクセルが原因で発生しました。変換-50％を使用してモーダルを中央揃えする場合、または％サイズを使用する場合。このコンテナ内の子要素は、（モーダルの幅/高さに応じて）偶数の位置を取得できます。 chromeでは、計算タブの要素でこれを確認できます。偶数の位置がある場合は、アニメーションのcssボタンなど、別の要素にカーソルを合わせると「ジャンプ」することがわかります。

Cssボタンにカーソルを合わせると、要素自体だけでなく、ページ内の他の要素もレンダリングされます。偶数の位置のため、要素が飛び回るのを見ることができます。

Scale2番目の問題が発生した場合、ユーザーが小さい画面でページにアクセスしているときに、ページ全体を縮小したいと思いました。最初はTranslate（scale）を使用しました。親divのスケールも、子要素の均等な位置を引き起こしています。あなたのスケールが0.8343493であるとしましょう。この場合、子要素は再計算され、単純に偶数になる可能性があります。 css3アニメーションでは、上記と同じ問題が発生します。

数週間の検索の後、Chromeの答えは非常に単純でした。現在、translate：（scale 1.0）の代わりに古いオプションzoom：1.0を使用しています。その結果、鮮明になりました。ちらつきのないページ。

スケールとちらつきのないボタンとトランジションを使用した最終結果の例：

0
Berry van Elk

これは主に、変換された要素（つまり、スライドインするモーダル）で発生することがわかりました。親要素のいずれかに変換がありますか？

WebkitベースのブラウザについてはWebの周りにたくさんの修正がありますが、Firefoxについては何もありません。

0
Westley Mon
-webkit-transform: translate3d(0, 0, 0);
-webkit-text-stroke: 0.35px;

これらのコードは、複数のブラウザをサポートするために書かれています。これをMozillaで試してください

-moz-transform: translate3d(0, 0, 0);
-moz-text-stroke: 0.35px;
0
Satrughna