背景附件：固定和背景大小：封面使圖像在Chrome中消失

我認爲這是Chrome的常見問題，但我找不到解決方法。背景附件：固定和背景大小：封面使圖像在Chrome中消失

前兩個背景圖像顯示，但是＃秒3和＃SEC4的背景圖像不會出現在Chrome上的Mac OS。 Firefox和Safari都工作得很好......

當我改變部分的高度，以少一點，顯示第三圖像...：

.main_section { 
    height: 700px; 
}

你知道是什麼原因造成這？它也發生在Windows或Linux上嗎？你知道這個問題的解決方法還是我做錯了什麼？

感謝，

尼克=）

來源

2013-07-20 Dafen

同在Chrome Windows版：最後兩個圖像丟失。如果我將'background-attachment'切換回''scroll'，它們就會變得可見。看起來像Chrome中的錯誤。 – Pavlo

我已經在舊版Chrome for Mac（版本25）中測試過它，它工作得很好。所以它似乎是最新版本和最新的beta/dev版本（28.0.1500.71,29.0.1547.22測試版，版本30.0.1568.2 dev）中的一個bug。 – Dafen

然後您應該報告它。 – Pavlo

這是當前的代碼中的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/

來源

2013-09-10 00:22:14

太棒了！非常感謝！ =） – Dafen

背景附件：固定和背景大小：封面使圖像在Chrome中消失

回答

相關問題