I'm currently working on a css parallax website. Everything looks great on desktop, but when viewed on mobile devices, I encounter a horizontal scrollbar issue due to the transform3d scale (even with overflow-x:hidden applied to the parallax class). If I switch to overflow:hidden, the issue is resolved but then I lose the ability to scroll through the content.
$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>