私の背景には本当に奇妙な問題があります。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);
回避策として使用できます。なぜそれが機能するのかわかりません...