Почему эффект «Параллакс» не работает в 34-ой и ниже версии Chrome?

Question

[Дмитрий Лахно]

Эффект "Параллакс" не работает в 34-ой и ниже версии Chrome.
В чем может быть дело?

JS:

jQuery(document).ready(function(){
    $objWindow = $(window);
        $('div[data-type="background"]').each(function(){
            var $bgObj = $(this);
            $(window).scroll(function() {
            var yPos = -($objWindow.scrollTop() / $bgObj.data('speed'));
            var coords = '100% '+ yPos + 'px';
            $bgObj.css({ backgroundPosition: coords });
        });
    });
});

CSS:

#portfolio {
background-image: url("../image/portfol_bg.jpg");
background-attachment: fixed;
background-origin: initial;
background-clip: initial;
background-size: cover;
background-repeat:no-repeat;
background-position:100% 0;
position:relative;
min-height:1080px;
}

HTML:

<div id="portfolio" class="bg_parralax" data-type="background" data-speed="10">
          <div class="portfolio">
                <p class="title_white_w hide_me">Портфолио</p>
.....

Comments

[Евгений Петров]

Да в чём угодно

Answer 1

[Константин Довнар]

В расстановке звезд.
Конкретнее какой скрипт, пример использования.

Comments

[Дмитрий Лахно]

уточнил код....если поможет..

Answer 2

[Дмитрий Евграфович]

А зачем вам поддерживать работоспособность скрипта для старых версий браузера, который обновляется автоматически?

Можете запустить Modernizr на старой и новой версиях и сравнить, что нового появилось. У меня, к примеру, один из скриптов как-то перестал работать из-за того, что в нем было прописано запускаться только на устройствах без поддержки touch, которую в одной из версий хрома как раз и ввели.

Answer 3

[Евгений Петров]

Поставил. Всё работает. jsfiddle.net/7bsyy3dr

HTML

<div class="parralax" data-type="background" data-speed="10"></div>

CSS

body{
	margin:0;
}
.parralax{
	position:relative;
	min-height:1500px;
	background:url(...) 100% 0 / cover no-repeat fixed;
}

JS

$(function(){
	var $blocks = $('div[data-type="background"]');

	$(window).scroll(function() {
		var scrollTop = - $(this).scrollTop();

		$blocks.each(function(){
			var $block = $(this),
				bposition = $block.css('backgroundPosition').split(/\s+/);

			$block.css({
				backgroundPosition: bposition[0] + ' ' + scrollTop / $block.data('speed') + 'px'
			});
		});
	});
});

Comments

[Дмитрий Лахно]

Я так понял код JS изменить?

[Евгений Петров]

@lahno не думаю, что виноват JS. Я его изменил потому, что мне не понравилась идея вешать много слушателей на одно событие в руте. Кроме того, мне показалось верным брать смещение фона по горизонтали из самого объекта, чтобы управлять им только в CSS.

Я не знаю, где у вас там собака порылась, вроде initial понимает Chrome аж ещё 1-й версии. Но если заработал мой вариант — его и оставьте.