배경 - 첨부 파일 : 고정 배경 크기 : 커버 나는이 크롬 공통 문제라고 생각 이미지가 크롬

Question

에 퀘스 트 로그에서 사라질 수 있지만 해결 방법을 찾을 수 없습니다.

See my code here (jsfiddle)

처음 두 개의 배경 이미지가 표시되지만 #의 초 3 및 #의 SEC4의 배경 이미지는 맥 OS에 크롬에 표시되지 않습니다.

.main_section { 
    height: 700px; 
} 

는이 원인을 알아 : 파이어 폭스와 사파리는

가 내가 적은 비트 부분의 높이를 변경하는 경우, 세 번째 이미지가 표시되는

... ... 잘 작동 ? Windows 또는 Linux에서도 발생합니까? 이 문제를 알고 있습니까 아니면 내가 잘못하고 있습니까?

감사합니다,

닉 =) 이것은 jsfiddle에서 현재 코드

Answer 1

입니다 :

이

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에서는 Linux에서 발생합니다.

당신은 디스플레이 문제를 해결하기 위해

.section_details {margin: 1px;} 

의 속성을 적용 할 수 있습니다. 내가 크롬 개발자가 아니기 때문에이 장면을 "고치는"장면 뒤에는 어떤 일이 일어나는지 말할 수는 없지만 행운을 빈다. :) 희망을 갖고 이것이 곧 해결 될 것입니다. 당신이 여백이 실제로 표시하지 않으려면

, 당신은뿐만 아니라

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

를 추가 할 수 있습니다.

편집하십시오 jsfiddle에 참조 : Windows에서 크롬에서 같은