問題タブ [background-attachment]

私の背景には本当に奇妙な問題があります。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 を次に示します。

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

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

アップデート

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

これは Chrome の一般的な問題だと思いますが、回避策が見つかりませんでした。

ここで私のコードを参照してください（jsfiddle）

最初の 2 つの背景画像は表示されますが、Mac OS の Chrome では #sec3 と #sec4 の背景画像は表示されません。Firefox と Safari は問題なく動作しています...

セクションの高さを少し低くすると、3 番目の画像が表示されます...:

何が原因か知っていますか？Windows または Linux でも発生しますか? これに対する修正を知っていますか、それとも何か間違っていますか?

ありがとう、

ニック =)

私は SVG を持っていますが、<text fill='url(#img1)'>Hello</text>スクロールするときは、div で背景をbackground-attachment:fixed.

SVG を使用してすぐに使用できる方法はありますか? Raphaël.jspatternTransformが要素内のマトリックスを操作することでこれを達成していることは知ってpatternいますが、追加のスクリプトを必要とせずにこれを達成したいと考えています。

JavaScript を使用していくつかの CSS プロパティを変更する必要があります。私が使用する必要がある Web サイトは CMS に基づいており、body 要素を編集してコードを挿入することしかできません。

ページの読み込み時に JavaScript を使用してオンザフライで CSS を変更/上書きする方法があるかどうか疑問に思っていましたか?

現時点では、2 つのプロパティを変更しようとしています (ただし、将来的にはさらに多くのプロパティを変更する可能性があります)。

このスクリプトを埋め込む予定の特定のページで、それらを次のように変更したいと思います。

私はこれを試しましたが、うまくいきませんでした (これはページの本文にしか入れられないことを思い出してください):

何か案は？ありがとう。

私にとって本当のヘッドスクラッチャーである奇妙な CSS の問題に遭遇しています。どの CSS を適用しても、背景画像はページのコンテンツと共にスクロールしません。これは、本文 CSS として設定したものです。

ただし、背景画像は常にスクロール時に固定されたままです。ページ URL: http://sigur-ros.co.uk/tour

何か案は？

どうもありがとう！

私のコードには、IE と Firefox にはない Google chrome のバグがあります。
アドレスは : chashnik です
。 DIV クラス '.health' には、添付ファイル プロパティが固定された背景画像があります。
Google chrome では、この画像が繰り返し点滅し、止まることはありません。
Firefox & IE では問題ありません。
CSS コード: