background-attachment:fixed and background-size: cover使图片在Chrome中消失

Question

我认为这是Chrome的常见问题，但我找不到解决方法。

See my code here (jsfiddle)

显示了前两个背景图像，但#sec3和#sec4的背景图像不会出现在Mac OS上的Chrome中。Firefox和Safari运行得很好……

当我将部分的高度更改为稍微小一点时，将显示第三个图像...：

.main_section {
     height: 700px;
}

你知道这是什么原因吗？在Windows或Linux上也会发生这种情况吗？你知道解决这个问题的方法吗?还是我做错了什么？

谢谢,

Nick =)

Answer 1

这是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中的一个bug。在当前版本的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/