web-dev-qa-db-ja.com

背景が固定されているため、サイトのスクロールが非常に遅くなりました。改善するにはどうすればよいですか？

以下のCSSを使用してディスカッションフォーラムの背景を変更しました

http://forum.antinovaordemmundial.com

html {
    background: url(http://antinovaordemmundial.com/mystuff/logo_blog.jpg) no-repeat center center fixed;
    background-image: url(http://antinovaordemmundial.com/mystuff/logo_blog.jpg);
    background-repeat-x: no-repeat;
    background-repeat-y: no-repeat;
    background-attachment: fixed;
    background-position-x: 50%;
    background-position-y: 50%;
    background-Origin: initial;
    background-clip: initial;
    background-color: initial;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

画像は1600x711と88kです。ページのスクロールが非常に遅くなりました。 CSSに問題がありますか、それとも画像をどうにかして小さくする必要がありますか？

編集：私はに変更しようとしました：

body {        
    color: #000;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 13px;
    text-align: center; /* IE 5 fix */
    line-height: 1.4;
    background-attachment: fixed;
    background-clip: initial;
    background-color: #51010E;
    background-image: url(http://antinovaordemmundial.com/mystuff/logo_blog.jpg);
    background-Origin: initial;
    background-position: initial initial;
    background-repeat: initial initial;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}

しかし、それでもスクロールは非常に遅いです。

cssbackgroundvertical-scrollingsmooth-scrolling
15
Emerson

background-sizeプロパティを削除すると、問題は解決します。問題を引き起こしたのは大きな画像の拡大縮小だったと思います。それでも問題が解決しない場合は、背景画像を完全に削除してください。しかし、大きな背景画像がラグを引き起こしているとは聞いたことがありません。

8
John Stimac

私は同じ問題を抱えていて、このjQueryプラグインを使用してそれを解決しました： http://srobbin.com/jquery-plugins/jquery-backstretch/

CSS3プロパティは使用しませんが、正常に動作し、Chrome 13またはFirefox6ではパフォーマンスの問題はありません。

12
kossdav

ここで貢献したいと思いました。 background-attachmentを使用するのではなく：修正済み。使用：前と位置：固定;問題がソートされました。私はこれと同じ問題に遭遇しました。

詳細はこちら： http://fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property

9
user2810762

また、次のスタイルをhtmlタグに適用すると、WebKitブラウザーのフレームレートが大幅に向上します。Chrome含まれています：

-webkit-transform: translate3d(0,0,0);

これは、私が知る限り、（大きな）背景写真と途切れ途切れのスクロールですべての場合に機能します。

0
TNF

問題は、実際には、background-attachmentに変更した場合のbackground-attachmentの固定値にあります。モバイルデバイスの場合はスクロールすると、ラグが修正されます。

0
WPExplorer

画像を圧縮（サイズを縮小）して問題を解決しました。 Radical Image Optimization Tool（RIOT） のような非常に効果的で簡単なツールを使用することを強くお勧めします。

Linuxでは、これは [〜＃〜] gimp [〜＃〜] を使用して実行できます。また、画像のメタデータを削除してサイズを縮小することもできます。 exiftool などのツールを使用してください。

0
ExillustX