Google Chrome не отображает изображения Parallax - PullRequest
Новая
       11

Google Chrome не отображает изображения Parallax

0 голосов
/ 07 июня 2018

Я все еще обучающийся разработчик, и я не уверен, что проблема, кажется, но мои изображения Parallax, кажется, не загружаются вообще только в Google Chrome.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"});
        
    });

Как я уже сказал, похоже, он работает на любом браузере, кроме Google Chrome.

Попробуйте сами: http://www.gracechurch.tv

Есть идеи?

Ответы [ 2 ]

0 голосов
/ 11 июня 2018

В настоящее время есть два исправления, которые я нашел в сети и которые работают.

Вы можете добавить следующие свойства ниже к своему элементу, который содержит фоновое изображение с фиксированным вложением. 

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;
}

Надеюсь, что это поможет на данный момент.

0 голосов
/ 08 июня 2018

Проблема с новым обновлением Chromes с 66 до 67. Проверьте, какая у вас версия Chrome.Если это 67, это ваша проблема ... или я должен сказать, проблема Google.Я проверил свой сайт на версии 66 на других процессорах и не было никаких проблем.

...