Проблема Паралакса. Как убрать эффект на моб. устройствах (сделать тач скроллинг)?

Question

[Предэйтор]

Нашел хороший чистый способ паралакса на https://www.okgrow.com/posts/css-only-parallax
Но на моб. устройствах само собой пропадает (инертный и плавный) скролл. Можно решить свойством -webkit-overflow-scrolling: touch. Но позиционирование изображения ведет себя странно, при прокрутке вверх проявляються другие части (скрытые почему-то) изображения, контент снизу пропадает.

Можно просто убрать все значения назад, в media. Паралакса не будет, все отлично. Но как сделать это только на моб. устройствах, а не на разрешение экрана ?

//Parallax Sass syntax
.MainContainer
	perspective: 1px
	transform-style: preserve-3d
	height: 100vh
	overflow-x: hidden
	overflow-y: scroll


.ParallaxContainer
	display: block
	position: relative
	height: 100vh
	width: 100vw
	transform: translateZ(-1px) scale(2)
	z-index: -1
	background-image: url(overwatch.jpg)
	background-size: cover
	background-position: center
	background-repeat: no-repeat


.ContentContainer
	display: block
	position: relative
	background-color: white
	z-index: 1
	padding: 10%

<div class="MainContainer">

  <div class="ParallaxContainer"></div>

  <div class="ContentContainer">
    <div class="Content">
	     lorem80 
    </div>
  </div>
</div>

Comments

[longclaps]

Паралакс - не Паркинсон, можешь писать с маленькой.

[hackuun]

Это параша, а не параллакс.

[Предэйтор]

hackuun, почему ? На вид вроде схож.