5

私の背景には本当に奇妙な問題があります。css で background-attachment を fixed に変更すると、メニューのフォントがなぜか小さくなります。スクロールまたはローカルに変更すると、本来のサイズに戻ります。なぜそれが起こっているのですか?

編集

OPの例を提供する:

この問題は、Safari (Chrome は問題ありません) と特定のマシン (非 Retina ディスプレイの MacBook Pro 15 インチでは再現可能ですが、iMac と Retina ディスプレイ マシンでは再現できません) でのみ発生します。OSX: 10.8.5、10.9.1 Safariバージョン: 6.1.1、7.0.1。

残念ながら、この問題は iframe 内では発生しないため、jsfiddle で再現することはできません (ただし、iframe のコンテンツはそれに反応しますが、これはブラウザのバグを強く示唆しています)。

代わりに、ローカルで確認できるサンプル HTML を次に示します。

<html>
    <body style="background-image: url(http://static4.depositphotos.com/1000419/321/v/950/depositphotos_3210195-Art-tree-beautiful-black-silhouette.jpg); background-attachment: fixed;">
    <p style="font-family: Arial; font-size: 30px;">some fun text</p>
    </body>
</html>

インスペクターで body タグを選択し、background-attachmentルールを切り替えます。フォントがわずかに変更されていることがわかります (スリム/太字)。

これがどれほどの問題で、どのマシンが影響を受けるかを調べて、問題が最終的に貧しいApple開発者に届くようにしたいと思います... :)

アップデート

楽しい事実:-webkit-transform: translateZ(0);回避策として使用できます。なぜそれが機能するのかわかりません...

4

3 に答える 3

2

私はSafariで同様の問題を抱えていましたが、これで間違いなく解決しました:

-webkit-font-smoothing: subpixel-antialiased;

一方、-webkit-transform: translateZ(0);常に役立つとは限りませんでした。

于 2014-08-14T17:15:58.283 に答える
0

次のいずれかを試すことができます。

-webkit-font-smoothing: antialiased;

-webkit-transform:translateZ(0);

-webkit-transform: scale(1);

-webkit-transform:rotate(360deg);

フォントのスムージングは​​、Safari で奇妙なフォントの問題が発生したときに、数回その仕事をしてくれました。

于 2014-02-19T14:05:55.860 に答える