ホームページ > ウェブフロントエンド > CSSチュートリアル > iOS で「background-attachment:fixed」の動作を複製するにはどうすればよいですか?

iOS で「background-attachment:fixed」の動作を複製するにはどうすればよいですか?

Susan Sarandon
リリース: 2024-12-25 15:53:14
オリジナル
958 人が閲覧しました

How to Replicate `background-attachment: fixed` Behavior on iOS?

バックグラウンド添付ファイルの複製: iOS での動作を修正しました

問題の調査

バックグラウンド添付ファイルを使用する場合: に修正されましたiOS で背景画像を固定しようとすると、開発者は予期しないサイズ設定やスクロール効果の欠如といった問題に遭遇します。この問題は、iOS の Safari がスクロールのパフォーマンスを向上させるために背景の添付ファイルを無効にしているために発生します。

ブラウザの制限について

@PaulIrish によると、固定背景では大幅な再描画が必要になります。コストがかかり、スクロールのパフォーマンスに悪影響を及ぼします。その結果、iOS 上の Safari はこの動作を無効にしました。

代替アプローチ

iOS では、background-attachment: fix がサポートされていないため、代替ソリューションを検討できます。

  • 固定位置DIV:

    • ポジションの作成: 固定; DIV を選択し、その中に背景画像を配置します。
    • 位置を使用して DIV をクリップします。親 DIV.
    • この手法は、background-attachment: fixed.

Examples

さらなる実装については、次の投稿を参照してくださいガイダンス:

    [iOS7 で背景画像を修正](https://stackoverflow.com/questions/21128043/fixed-background-image-with-ios7)
  • [本文を修正ページが表示された状態で背景がスクロールしますiOS7](https://stackoverflow.com/questions/20786807/fixed-body-background-scrolls-with-the-page-on-ios7)

以上がiOS で「background-attachment:fixed」の動作を複製するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート