css - overflow-x not working on chrome mobile -
i'm trying make css parallax site. on desktop works fine on mobile devices horizontal scrollbar caused transform3d scale (also overflow-x:hidden on parallax class). if change overflow:hidden works can't scroll content anymore.
$parallax-perspective : 1 !default; .parallax{ height: 100vh; width: 100%; overflow-x: hidden; overflow-y: scroll; @include perspective($parallax-perspective*1px); @include transform-style(preserve-3d); } .parallax__group { position: relative; height: 100vh; @include transform-style(preserve-3d); } @mixin parallax__layer( $distance : 0, $perspective : $parallax-perspective ) { position: absolute; top: 0; right: 0; bottom: 0; left: 0; @include transform3d( translate3d(0,0,$distance * $perspective * 1px) scale(abs($distance - 1), abs($distance - 1))); z-index: $distance * 1000; } .parallax__layer--base { @include parallax__layer(0); } .parallax__layer--back { @include parallax__layer(-1); } <div class="parallax"> <div class="parallax__group"> <div class="parallax__layer--base"></div> <div class="parallax__layer--back"></div> </div> </div>
it working wrapper class
.parallax__inner{ overflow-x:hidden; }
Comments
Post a Comment