谷歌浏览器不显示视差图像

Question

我仍然是一个学习开发人员，我不确定问题似乎是什么，但我的视差图像似乎根本没有在谷歌浏览器上加载。Firefox，IE和Safari似乎完美无缺。我已经读过由于Chrome中的故障，它可能与固定属性有关，但我不确定我的下一步是什么。

所以我在很多(如果不是全部(页面上都有这个当前的英雄设置：

<section class="hero-fullscreen parallax">            
<div class="background-image">
<img src="img/backgrounds/encounter.png" alt="img">
</div>                         
</section>

下面我有我的 CSS：

.hero-fullscreen { 
position: relative; 
	width: 100%;
	height: 100%;  
background-color: #0f1112; 
}
.parallax {
position: relative;
overflow: hidden

}
.parallax .container {
position: relative;
z-index: 2;
}
.parallax > .background-image,
.parallax .slides li > .background-image {
height: 100vh;
top: -50vh;
transition: opacity 0.9s ease;
-webkit-transform-style: preserve-3d;
}
.parallax:first-child .slides li > .background-image,
.parallax:first-child .background-image,
.hero-fullscreen.parallax .background-image {
top: 0;
}
.main-container > a:first-child + .parallax .background-image {
top: 0;
}
@media all and (max-width: 1024px) {
.parallax > .background-image,
.parallax .slides li > .background-image {
top: 0 !important;
transform: none !important;
-webkit-transform: none !important;
height: 100%;
}
}

/* Background Image */
.background-image {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-size: cover !important;
background-position: 50% 50% !important;
z-index: 0;
opacity: 0;
background: #1c1c1c;
transition: opacity .3s;
-webkit-transition: opacity .3s;
-moz-transition: opacity .3s;

}
.background-image img {
display: none
}

section {
position: relative;
}

使用我的 JS：

parallaxVossen();
var isOpera, isFirefox, isSafari, isIE, isEdge, isChrome, isBlink, isMob;
isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
isFirefox = typeof InstallTrigger !== 'undefined';
isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
isIE =  navigator.userAgent.indexOf("MSIE ");
isEdge = !isIE && !!window.StyleMedia;
isChrome = !!window.chrome && !!window.chrome.webstore;
isBlink = (isChrome || isOpera) && !!window.CSS;
isMob =  (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent));
if (isChrome || isFirefox  || isSafari) {
if ($(window).width() > 992) {
$('.parallax').vossenParallax();

};
$(window).scroll(function () {
function parallaxHero() {
var scrolled = $(window).scrollTop();
if ($(window).width() > 992) {
$('.map-parallax').css('top', -(scrolled * 0.4) + 'px');
$(".slide").css({transform: 'translate3d(0px, ' + (scrolled * 0.4) + 'px, 0px)'});
}
}
parallaxHero();
});
}

$(window).load(function () {
$('.parallax-bg img').animate({opacity : 1}, 1000);
$('.white-until-load').css({color : "#191a1c"});

});

就像我说的，它似乎适用于所有浏览器，除了谷歌浏览器。

自己尝试：http://www.gracechurch.tv

有什么想法吗？

Answer 1

目前，我在网上找到了两个有效的修复程序。

您可以将以下属性添加到包含带有固定附件的背景图像的元素中。

yourdiv {
position:relative;
background-image:url(your_image);
background-size:cover;
background-position:center;
background-attachment:fixed;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}

或者，您可以使用背景固定图像将元素的位置更改为静态。

yourdiv {
position:static;
background-image:url(your_image);
background-size:cover;
background-position:center;
background-attachment:fixed;
}

希望这对现在有所帮助。

Answer 2

这是Chromes从66到67的新更新的问题。检查您运行的是哪个 Chrome 版本。如果是67，那就是你的问题...或者我应该说，谷歌的问题。我在其他 CPU 上的版本 66 上测试了我的网站，没有任何问题。