视差效果在某些浏览器中不起作用

Question

Hi guys I am doing this parallax effect with CSS and HTML only. I am testing it for Desktop and it works on: Chrome, Firefox, IE and Spartan.

But I hit on the rock in the mobile test. Currently from my nexus 5:

Firefox: works; Chrome: not-working;

It is working on Chrome for iOS (for now tested on ipad mini only)

Is this a bug in the version? or I am missing something?

here is a live preview:

live demo

here is a js file I extracted for you to test:

jsfiddle demo

<div id="title" class="slide header"></div>
<div class="slide"></div>

.slide {
   position: relative;
   min-height: 100vh;
   width: 100vw;
}

#title {
   background-image: url("http://i.imgur.com/LzOCzLr.jpg");
   background-attachment: fixed;  
}

UPDATE: NOT WORKING ONLY ON CHROME MOBILE IN ANDROID

Answer 1

Remove the position:fixed and try this: https://jsfiddle.net/aatpa7qd/4/

$('body').scroll(function(){
  $("#title").css({"background-position":"center " +($('body').scrollTop()*0.65) + "px"});
});