完整的CSS視差網站不在鉻上工作

Question

我在我的網站上使用在這裏完成的效果：http://keithclark.co.uk/articles/pure-css-parallax-websites/一切工作正常，除了在鉻，我不知道爲什麼。有人可以告訴我問題在哪裏嗎？這裏是我的網頁：http://emmanuelmelendez.com.mx/home.html謝謝！

HTML 
<header> 
<!-- !Menu --> 
    <ul> 
     <li><a href="home.html"> Inicio</a></li> 
     <li><a href="about.html">Acerca de</a></li> 
     <li><a href="#">Portafolio</a></li> 
     <li><a href="#">Contacto</a></li> 
    </ul> 

</header> <!--end Menu--> 

<div class="parallax"> 
<!-- !Demo reel--> 
    <div class="parallax__group"> 
     <div class="parallax__layer parallax__back"> 
      <video autoplay loop poster="img/bg/Logo.jpg" class="background"> 
       <source src="video/bg/IntroReel.webm" type="video/webm"> 
       <source src="video/bg/IntroReel.mp4" type="video/mpeg"> 
      </video> 
     </div>  
     <div id="reel" class="parallax__layer parallax__base"> 
      <h1>Bienvenidos a mi sitio</h1> 
      <a href="#">Ver Demo Reel</a> 
      </div>    
    </div><!--end Demo Reel--> 

<!-- !Servicios --> 
    <div class="parallax__group"> 
     <div class="parallax__layer parallax__base" id="servicio"> 
      <h1>Producciones</h1> 
     </div> 
    </div><!--end Servicios--> 

<!-- !Video --> 
    <div class="parallax__group"> 
     <div class="parallax__layer parallax__back"> 
      <video autoplay loop poster="img/bg/video.jpg" class="background"> 
       <source src="video/bg/fondoVideo.webm" type="video/webm" > 
       <source src="video/bg/fondoVideo.mp4" type="video/mpeg">      
      </video> 
     </div> 

     <div class="parallax__layer parallax__base" >    
      <h2>Audiovisual</h2>    
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta sed odio eget facilisis. Aliquam diam eros, posuere et hendrerit sed, pharetra pretium lorem. Praesent sodales risus neque, a vulputate libero pretium sit amet. Donec sapien nunc, eleifend vitae pellentesque ac, lobortis a eros. Aenean fringilla odio sit amet laoreet semper. Donec ut dapibus magna. Sed eu porta purus. Duis lorem mauris, elementum semper sodales in, tincidunt vel nibh.</p> 
     </div>    
    </div><!--end Video--> 

<!-- !Web --> 
    <div class="parallax__group" id="web"> 
     <div class="parallax__layer parallax__base">     
      <h2>Desarrollo Web</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta sed odio eget facilisis. Aliquam diam eros, posuere et hendrerit sed, pharetra pretium lorem. Praesent sodales risus neque, a vulputate libero pretium sit amet. Donec sapien nunc, eleifend vitae pellentesque ac, lobortis a eros. Aenean fringilla odio sit amet laoreet semper. Donec ut dapibus magna. Sed eu porta purus. Duis lorem mauris, elementum semper sodales in, tincidunt vel nibh.</p> 
     </div>    
    </div><!--end Web--> 

<!-- !Fotografia --> 
    <div class="parallax__group"> 
     <div class="parallax__layer parallax__back"> 
      <img class="background" src="img/bg/foto.jpg" alt="Fondo Foto"> 
     </div>  
     <div class="parallax__layer parallax__base">     
      <h2>Fotografía</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta sed odio eget facilisis. Aliquam diam eros, posuere et hendrerit sed, pharetra pretium lorem. Praesent sodales risus neque, a vulputate libero pretium sit amet. Donec sapien nunc, eleifend vitae pellentesque ac, lobortis a eros. Aenean fringilla odio sit amet laoreet semper. Donec ut dapibus magna. Sed eu porta purus. Duis lorem mauris, elementum semper sodales in, tincidunt vel nibh.</p> 
     </div>    
    </div><!--end Fotografia--> 

<!-- !Redes --> 
    <div class="parallax__group" id="redes">  
     <div class="parallax__layer parallax__base"> 
     <h3>Sígueme en mis redes sociales</h3> 
     <a href="https://www.instagram.com/emmanu_stuff/">Instagram</a> 
     <br> 
     <!-- SnapWidget --> 
     <iframe src="http://snapwidget.com/sc/?u=ZW1tYW51X3N0dWZmfGlufDE1MHwzfDN8fHllc3wyMHxub25lfG9uU3RhcnR8eWVzfG5v&ve=271115" title="Instagram Widget" class="snapwidget-widget" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:960px; height:150px"></iframe> 
     <br> 
     <br> 
     <a href="https://500px.com/emmanuelmelendz">500px</a> 

     <br> 
     <!-- 500pxWidget --> 
     <iframe src="http://500pxwidget.com/in/?u=ZW1tYW51ZWxtZWxlbmR6fGlufDEyMHw2fDF8fG5vfDV8" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:750px; height: 125px" ></iframe>    
     </div>    
    </div><!--end Redes--> 

<!-- Copyright--> 
    <div class="parallax__base">    
     <div id="Copyright"> Emmanuel Melendez ©<script type="text/javascript"> 
       var d = new Date() 
       document.write(d.getFullYear()) 
      </script> 
     </div> 
    </div><!-- end copyright-->  
</div><!-- end parallax--> 

CSS 

body{ 
    background: white; 
    font-family: Light, Fallback, helvetica; 
    color: white; 
    font-size: 21px; 
    overflow: hidden; 
    text-align: center; 
} 
    h1{ 
     margin-top: 35vh; 
     background: rgba(0,0,0,.6); 
     padding: 10px; 
     font-family: Titulo,Fallback, helvetica; 
     font-size: 90px; 
    } 

    h2{ 
     margin-top: 25vh; 
     background: rgba(0,0,0,.6); 
     padding: 10px; 
     font-family: Titulo,Fallback, helvetica; 
     font-size: 90px; 
    } 

    h3{ 
     margin-top: 15vh; 
     background: rgba(0,0,0,.6); 
     padding: 10px; 
     font-family: Titulo,Fallback, helvetica; 
     font-size: 60px; 
    } 

    p{ 
     width: 960px; 
     margin: 0 auto; 
     padding: 16px; 
     text-align: justify; 
     background: rgba(0,0,0,0.6); 
    } 

/* !PC */  
@media all and (min-width:600px) {  
/* Menu */  
    header{ 
     background: white; 
     height: 44px; 
     font-family: Menu, Fallback, Helvetica; 
     width: 100%; 
     border-bottom: 1px solid #b31219; 
    } 

    header ul{ 
     width: 960px; 
     padding-left: 20px; 
     margin: 0 auto; 
     list-style-type: none; 
     color: black; 
    } 

    header li{ 
     display: table-cell; 
     vertical-align: middle; 
     padding-top: 11px; 
    } 

    header li a{ 
     padding: 12px 40px; 
     text-decoration: none; 
     color: black; 
    } 

    header li a:hover{ 
     background: black; 
     color: white; 
    } 

/* Parallax */ 
    .parallax { 
     height: 500px; /* fallback for older browsers */ 
     height: 100vh; 
     overflow-x: hidden; 
     overflow-y: auto; 
     -webkit-perspective: 300px; 
     perspective: 300px; 
    } 

    .parallax__group { 
     position: relative; 
     height: 100vh; 
     width: 100vw; 
     -webkit-transform-style: -webkit-preserve-3d; 
     transform-style: preserve-3d; 
    } 

    .parallax__layer{ 
     position: absolute; 
     overflow: visible; 
     top: 0; 
     left: 0; 
     right: 0; 
     bottom: 0; 
    } 

    .parallax__base { 
     -webkit-transform: translateZ(0); 
     transform: translateZ(0); 
     z-index: 2; 
    } 

    .parallax__back { 
     -webkit-transform: translateZ(-300px) scale(2); 
     transform: translateZ(-300px) scale(2); 
     z-index: 1; 
    } 
/* !Reel */ 
    #reel a{ 
     text-decoration: none; 
     color: white; 
     font-family: Titulo,Fallback, helvetica; 
     font-size: 50px; 
     text-align: center; 
     padding: 10px 20px; 
     background: #b31219; 
     border-radius: 15px; 
    } 

    #reel a:visited{ 
    } 

    #reel a:hover{ 
     background: black; 
    } 

    #reel a:active { 
     color:black; 
     background: white; 
    } 


/* Servicios */ 
    #servicio{ 
     background: #005280; 
    } 

/* Web */ 
    #web{ 
     background-image: url('/img/bg/web.jpg'); 
     background-position: center center; 
     background-size: auto 100%; 

    } 
/* Fondos*/ 
    .background{ 
     /* solo usar para alinear contenido en formato full HD*/ 
     width: auto; 
     height: 100vh;  
     position: fixed; 
     top: 50%; 
     transform: translateX(-50%) translateY(-50%); 
     z-index: -100; 
    } 

/* Redes */ 
    #redes{ 
     background-image: url('/img/bg/medios.jpg'); 
     background-size: 100% auto; 
     font-size: 50px; 
     font-family: Titulo, Fallback, helvetica; 
    } 

    #redes a{ 
     padding: 0px 15px; 
     background: black; 
     text-decoration: none; 
     color: white; 
    } 

    #redes a:hover{ 
     background: white; 
     color: black; 
    } 

/* !Copyright */ 
    #Copyright{ 
     padding-top: 6vh; 
     width: 100%; 
     height: 16vh; 
     background: #b31219; 
     color: white; 
     font-size: 50px; 
     font-family: Titulo, Fallback, helvetica; 
     text-align: center; 
    } 
} 

Answer 1

，您應該使用的-webkit-preserve-3dpreserve-3d代替

.parallax__group { 
    position: relative; 
    height: 100vh; 
    width: 100vw; 
    -webkit-transform-style: preserve-3d; /* <-- */ 
    transform-style: preserve-3d; 
}