This is your current code in the 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;
}
This appears to be a bug in Google Chrome. This does happen on Linux in the current version of Chrome.
You can apply a property of
.section_details {margin: 1px;}
in order to work around the display issue. As I am not a Chromium developer, I cannot tell you what goes on behind the scenes that this "fixes" it, but good luck! :) Hopefully this will get resolved soon.
If you do not want the margin to actually show, you may be able to add
.section_details {
-webkit-transform: scale(1.01);
transform: scale(1.01);
}
as well.
edit: See it in a jsfiddle: http://jsfiddle.net/jjordanca/4Rwze/1/