google-chrome - background-attachment:fixed および background-size: カバーにより Chrome で画像が消える

Question

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

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

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

.main_section {
     height: 700px;
}

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

ありがとう、

ニック =)

score 1 · Accepted Answer

これは、jsfiddle の現在のコードです。

HTML:

<section class="main_section" id="sec1" data-stellar-background-ratio="0.2">
    <article class="section_details">
        <h1>Start</h1>
    </article>
</section>

<section class="main_section" id="sec2" data-stellar-background-ratio="0.2">
    <article class="section_details">
        <h1>Überschrift</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut ante eu massa consectetur consequat. Nullam interdum justo vitae mi tristique interdum.
            Mauris arcu metus, gravida sed malesuada in, euismod in libero. Nulla euismod ultrices pulvinar. In at gravida nulla. Suspendisse at neque ut neque convallis
            hendrerit. Maecenas mollis placerat commodo. Maecenas ornare magna vitae nulla mollis accumsan. Nullam nec congue lorem. In eleifend, elit porttitor cursus hendrerit,
            turpis justo tincidunt ante, sed imperdiet velit arcu vitae ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
            Mauris sed turpis felis. Donec sit amet aliquam quam. Duis at orci aliquam metus bibendum egestas nec sit amet sem. Aliquam eget diam nulla, eget porttitor ligula.
            Sed at velit vel tellus consequat gravida sit amet sit amet nunc. Nam convallis interdum arcu ut interdum. Curabitur vitae eros felis.</p>
    </article>

</section>

<section class="main_section" id="sec3" data-stellar-background-ratio="0.2">
    <article class="section_details">
        <h1>Überschrift</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut ante eu massa consectetur consequat. Nullam interdum justo vitae mi tristique interdum.
            Mauris arcu metus, gravida sed malesuada in, euismod in libero. Nulla euismod ultrices pulvinar. In at gravida nulla. Suspendisse at neque ut neque convallis
            hendrerit. Maecenas mollis placerat commodo. Maecenas ornare magna vitae nulla mollis accumsan. Nullam nec congue lorem. In eleifend, elit porttitor cursus hendrerit,
            turpis justo tincidunt ante, sed imperdiet velit arcu vitae ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
            Mauris sed turpis felis. Donec sit amet aliquam quam. Duis at orci aliquam metus bibendum egestas nec sit amet sem. Aliquam eget diam nulla, eget porttitor ligula.
            Sed at velit vel tellus consequat gravida sit amet sit amet nunc. Nam convallis interdum arcu ut interdum. Curabitur vitae eros felis.</p>
    </article>
</section>

<section class="main_section" id="sec4" data-stellar-background-ratio="0.2">
    <article class="section_details">
        <h1>Überschrift</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut ante eu massa consectetur consequat. Nullam interdum justo vitae mi tristique interdum.
            Mauris arcu metus, gravida sed malesuada in, euismod in libero. Nulla euismod ultrices pulvinar. In at gravida nulla. Suspendisse at neque ut neque convallis
            hendrerit. Maecenas mollis placerat commodo. Maecenas ornare magna vitae nulla mollis accumsan. Nullam nec congue lorem. In eleifend, elit porttitor cursus hendrerit,
            turpis justo tincidunt ante, sed imperdiet velit arcu vitae ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
            Mauris sed turpis felis. Donec sit amet aliquam quam. Duis at orci aliquam metus bibendum egestas nec sit amet sem. Aliquam eget diam nulla, eget porttitor ligula.
            Sed at velit vel tellus consequat gravida sit amet sit amet nunc. Nam convallis interdum arcu ut interdum. Curabitur vitae eros felis.</p>
    </article>
</section>

CSS:

.main_section {
    height: 1000px;
}

#sec1 {
    background: url("http://farm4.staticflickr.com/3718/9321223260_700efbede4_b.jpg") no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#sec2 {
    background: url("http://farm8.staticflickr.com/7422/9320632979_1cc63b1320_b.jpg") no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#sec3 {
    background: url("http://farm3.staticflickr.com/2863/9322473736_76944327d5_b.jpg") no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#sec4 {
    background: url("http://farm4.staticflickr.com/3719/9319325635_14e101bbdb_b.jpg") no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.section_details {
    background-color: white;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;
}

これは Google Chrome のバグのようです。これは、現在のバージョンの Chrome の Linux で発生します。

のプロパティを適用できます。

.section_details {margin: 1px;}

表示の問題を回避するため。私は Chromium の開発者ではないので、これが「修正」する裏で何が起こっているのかはわかりませんが、頑張ってください! :) うまくいけば、これはすぐに解決されます。

マージンを実際に表示したくない場合は、追加できる場合があります

.section_details {
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
}

同じように。

編集: jsfiddle で参照してください: http://jsfiddle.net/jjordanca/4Rwze/1/

google-chrome - background-attachment:fixed および background-size: カバーにより Chrome で画像が消える

1 に答える 1

Related

Reference