backstretch在Chrome中引起其他背景圖像的問題

我使用Backstretch.js和Wordpress站點中的自定義字段來動態應用全屏背景圖像。backstretch在Chrome中引起其他背景圖像的問題

它對身體背景圖像工作正常，但我也有一個CSS背景圖像設置在頁面上的另一個元素和backstretch似乎搞亂了，但只在鉻。

當頁面加載兩個背景圖像顯示正常，但當我向下滾動頁面的CSS背景消失 - 有時完全，有時只是隨機部分。如果我刪除backstretch，那麼CSS bg的行爲正常。理想情況下，我希望他們都被固定。

直道

<?php $image = get_post_meta($post->ID, 'wpcf-background-image', TRUE); ?> 
    <?php if (! empty ($image)) { ?> 
     <script> 
      jQuery.backstretch("<?php echo $image ?>"); 
     </script> 
<?php } ?>

CSS

.full-grey-cover { 
overflow: hidden; 
background-image: url(images/menu-bg-2.jpg) !important; 
background-repeat: no-repeat !important; 
background-size: cover !important; 
background-position: center !important; 
background-attachment: fixed !important; 
-webkit-background-size: cover !important; 
-moz-background-size: cover !important; 
-o-background-size: cover !important; 
background-size: cover !important;

}

我一直在使用直道爲背景目前有2頁設置。

http://ffionas.ashfordweb.co.uk/

和

http://ffionas.ashfordweb.co.uk/brunch

似乎FF和Safari，但無法在Chrome（蘋果機/小牛），做工精細。煩人，因爲我只用直道爲固定BG將在iOS設備上發揮不錯..

來源

2014-10-01 Neil Day

我有同樣的問題，只有對蘋果非常有用。您是否找到解決方案？ – 2014-10-13 11:14:33

鉻（38.0.2125.101米）的最後一次更新後，我遇到了直道同樣的問題。調試後，我發現這是.backstretch類的負Z值索引，這使我的網站變得糟糕。將z-index更改爲1並將包裝類更改爲position：relative與z-index：2之後，所有內容都會恢復正常。希望它有幫助！

來源

2014-10-13 12:01:24

此解決方案爲我工作。

你需要後

0 === a(d).scrollTop() && d.scrollTo(0, 0);

我還需要更改zIndex的在這個文件中 a.fn.backstretch在Backstretch.js

$('body').wrapInner('<div id="backstreach-fix" style="z-index: 1; position: relative;">');

添加此代碼範圍。

查找zIndex的：-999998和改變zIndex的：1

查找zIndex的：-999999並切換到用zIndex：0

來源

2014-10-27 17:51:00

此修補程序適用於我使用Chrome v 51.0.2704.103 m。感謝您的信息。 – dvmac01 2016-07-05 11:19:59

在單頁網站（http://www.abarthpulizie.it/），我不得不由Neil描述了同樣的問題天。我以兩種方式使用了Backstretch。首先我用一個動畫滑塊同步背景圖像來實現Sweeper am animate.less css lib。第二我同步背景更改與滾動到一個頁面網站的各個部分。

直到Chrome更新全部工作。Backstretch停止正常工作後。

我試着Janusz Chodzicki解決方案（避免負Z指數）與一些更正（我分叉原Github項目：https://github.com/magicbruno/jquery-backstretch），但這隻解決了第一個問題。

當頁面滾動時，我有奇怪的結果。固定的背景滾動，backstrech圖像根本沒有出現或出現一瞬間或部分切割，等等......

最後我試圖刪除CSS動畫規則「-webkit-backface-visibility：hidden」。不太重視身體和現在一樣的Chrome更新之前（ALSA所有的工作沒有任何負面的z-index修正。

我希望這將是某人

來源

2014-11-02 08:35:14 user2408082

backstretch在Chrome中引起其他背景圖像的問題

回答

相關問題