web-dev-qa-db-ja.com

SafariでCSSトランジションにカーソルを合わせると、特定のフォントの色が明るくなります

私のCSSで、クラスの遷移を定義しました。何らかの理由で、トランジションのあるクラスにカーソルを合わせると、transition-duration何らかの理由で、他の場所（フォームのプレースホルダーと特定のリンク）でフォントの色が変更されます。 （これは、私が知る限り、Safariでのみ発生します。）

これが私が話していることを示すjsFiddleです：

http://jsfiddle.net/EJUhd/

なぜこれが発生するのか、どうすればそれを防ぐことができるのか誰かが知っていますか？

csscss-transitions
20
tvalent2

私は同様の問題に苦しんでいました。私にとって、ページ全体のランダムなリンクは明らかに太字になりました（Chrome（Windows 7およびOSXの場合）および同じバージョンのWindowsのSafariは正常に機能しました。

解決策は明らかではなく、実行している内容によっては最適ではない場合がありますが、このコード行を追加すると問題が修正されました。

-webkit-transform: translateZ(0);

これにより、基本的にGPUがアニメーションを実行し、テキストにアーティファクトがサイトに含まれなくなります。それを使用することが常に適切であるとは限らないことに注意してくださいmayより多くのバッテリー寿命とより多くのリソースを使用します。ただし、使用量が少ない場合もあるので、基本的には追加時にパフォーマンスを確認してください。

これを通常の状態に追加しますnot：hoverアニメーション状態。

img { -webkit-transform: translateZ(0); }

とは対照的に：

img:hover { /* not here */ }

他の非常に良い副作用は、実行しているアニメーションによっては、GPUを介してスムーズになる可能性があることです。そのため、フォローアップの投稿で言及した途切れ途切れのアニメーションは表示されません。私の場合、アニメーションはサファリでよりシームレスでした。私は画像の120％のスケールと5度の回転を行っていましたが、同時にいくつかのボックスシャドウが表示されていました。私の状況では、残念ながらCPU使用率は低下しませんでした。

35
Mauricio

上記のアンチエイリアシングの識別と、以下の記事の助けのおかげで、コードをtranslate3d(0,0,0)を含むように変更すると、問題は解消されました。

    -webkit-transition-duration: .17s, .17s translate3d(0,0,0);

移行は以前ほどスムーズではありませんが、それは別の質問の主題です。

Chromeでwebkit-transformを使用して回転するときの奇妙なテキストアンチエイリアシング

http://johanbrook.com/design/css/a-fix-for-antialiasing-issues-in-webkit-browsers/

http://www.webkit.org/blog/386/3d-transforms/

2
tvalent2

私が抱えていた問題に関連するトピックはこれ以上見つかりませんでしたが、それは上記の問題に関連しています。したがって、誰かに役立つかもしれません。

2つの言葉で：私はいくつかのコンテナ（ポップアップ）、いくつかの要素を中に持っています。表示は次のようになります。コンテナの背景が不透明度によって暗くなり、内部の要素が拡大します（後ろから私たちに近づくように）。すべてがどこでもうまく機能しますが、Safari（Mac/Win/iPhone）では機能しません。 Safariは「最初に」コンテナを表示しますが、奇妙な方法で点滅します（小さな短い点滅が表示されます）。

-webkit-transformを追加するだけです：translateZ（0）; （コンテナに!!!）助けてくれました。

.container {
    -webkit-transform: translateZ(0); /* <-- this */
}

.container section {
    -webkit-transform: translateZ(0) scale(.92); /* <-- and I added translate here as well */
    -webkit-transition: -webkit-transform .4s, opacity .3s;
    opacity:0;
}

.container.active section {
    -webkit-transform:translateZ(0) scale(1);
    -webkit-transition: -webkit-transform .3s, opacity .3s;
    opacity:1;
}

しかし、遷移について言えば、コードには次の部分もありました。

.container {
    ...
    top:-5000px;
    left:-5000px;
    -webkit-transition: opacity .5s, top 0s .5s, left 0s 5s, width 0s 5s, height 0s 5s;
}
.container.active {
    -webkit-transition: opacity .5s;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

cssスイッチングのみを使用してポップアップを表示/非表示にしたいことを考慮します（また、「display：none」の代わりにポップアップを適切に非表示にします）。

そのため、Safariが表示されると、（明らかに）-webkit-transition：opacity .5s;だけでオーバーロードしたにもかかわらず、「不透明度」以外の遷移プロパティを継承していました。

したがって、以下を追加すると問題が解決しました。

.container {
    ...
    -webkit-transition: opacity .5s, top 0s 0s, left 0s 0s, width 0s 0s, height 0s 0s;
}
2
Agat

なぜこれが行われているのかを説明し始めることはできませんが、Safariはテキストの色を変更していません。トランジションが進行している間、テキストのアンチエイリアスを変更します。テキストの端が滑らかになり、テキスト自体が薄くなります。アクセシビリティツールでフィドルを拡大すると、これは非常に明白です。一部の小さいサイズでは、フォームテキストの横にあるボタンの周りの陰影もシフトします。 （Safariがトランジション中にいくつかのものを再描画したり、サブピクセルレベルで方向を変えたりする可能性はありますか？誰かがこれを説明してください、それは今私を狂わせています！）

なぜこれを行っているのか私にはよくわからないので、これらは最善の解決策ではないかもしれません：

変換する対象によっては、css変換をjavascriptアニメーションに置き換えるとおそらく修正されます。
たとえば、フィドルでは、問題はスケール変換でも発生しましたが、同様のjQueryアニメーション関数では発生しませんでした。

アンチエイリアシングの変更があまり目立たない色合いやスタイルがあるようです（少なくともフィドルでは）。そのため、プレースホルダーやその他の影響を受けるテキストのスタイルを変えることもできます。
（このスレッドは、そのルートに進む場合、プレースホルダーのスタイル設定に役立つ場合があります： CSSでHTML5入力のプレースホルダーの色を変更します ）

2
Brid

rotation（）の場合は問題ないかもしれませんが、scale（）の場合は-webkit-transform: translateZ(0);式が機能しませんでした。

私が使用した：

-webkit-font-smoothing: antialiased;
0
Despertaweb

transitionと_translate3d_を使用しても同様の問題があります。 _:hover_スタイルのページ上の要素がホバー動作を示す場合があります。スライダーを使用するとこの問題が発生します。 -webkit-transform: translateZ(0);を_:hover_要素に配置すると、その動作は正常です。

0
Johann Heyne

同じ問題が発生しましたが、トランジション中に一部のテキストがアンチエイリアス処理されました。これは、配置された要素内にz-indexがあり、z-index自体が相対eに配置されているアンカーテキストでのみ発生します。すべての位置を削除してインデックスを作成すると、問題は解消されます。

0
ganchan