html - personalizar - "-Webkit-overflow-scrolling: toque" rompe perspectiva css 3d

personalizar scroll css

Question

La búsqueda de una solución para iOS Safari SOLAMENTE

Al usar -webkit-overflow-scrolling: touch it rompe la perspectiva 3d en iOS.

Vea la demostración en CodePen .

HTML

<div class="pers">
  <div class="scroll">
    <div class="el">
    </div>
  </div>
</div>

CSS

.pers {perspective:300px;}
.scroll {overflow-y:scroll;-webkit-overflow-scrolling:touch; height:100vh;}
.el {-webkit-transform:rotateX(80deg);transform:rotateX(80deg);}

¿Hay alguna solución?

Answer 1

El fragmento compartido tampoco funciona en Mozilla Firefox. A continuación se muestra la solución probada para iOS Safari / Chrome (iPhone-6S), Windows Mozilla / Chrome:

no es necesario usar -webkit-overflow-scrolling . Podría haber un posible error para esta característica, ya que está en desarrollo [Reference Link] . Eliminar esta propiedad genera el comportamiento deseado. Puede que no sea la solución exacta, pero puede actuar como una solución alternativa.

.scroll {perspective:300px;overflow-y:scroll;height:100vh;}
.el {-webkit-transform:rotateX(80deg);transform:rotateX(80deg);}

Codepen: http://codepen.io/anon/pen/LxZZdX

Answer 2

Este fragmento de HERE podría hacerlo. Parecen haber tenido este problema también

.outer {`enter code here`
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  /* More properties for a fixed height ... */
}

.inner {
  height: calc(100% + 1px);
}

Answer 3

Actualización, 29 de mayo

Doh! Soy tan estúpido. El siguiente, aunque es cierto ... ish no aborda la pregunta lo suficientemente bien.

Si desea que la configuración de la rotación permanezca igual a la que ha ilustrado, agregue un div entre .scroll y .el , y .el siguiente manera:

{perspective:300px;}

Por lo tanto, parece que desea que .pers div se cambie con .scroll o agregue otro después de .scroll con la misma perspectiva.

Además, intente mover la perspective: 300px; para .scroll . El ángulo parece cambiar a medida que uno se desplaza hacia arriba o hacia abajo.

Respuesta original

La respuesta no es realmente. Uno no puede contener una transformación 3D dentro de un contenedor con recorte que se intenta aquí.

El problema es overflow-y:scroll rompe la propiedad de estilo de transformación según la spec . El desbordamiento-y afecta al elemento anidado. Si su problema persiste, también puede tener que usar la -WebKit-transform-style: preserve-3d en .scroll , aunque creo que iOS ya tiene un contexto de apilamiento establecido en este caso (Firefox lo requiere, Webkit parece no) .

Una solución es eliminar su overflow:hidden del body y overflow-y:scroll desde .scroll , pero sospecho que va a querer tenerlo como una parte más pequeña de la página / pantalla y mover los bloques de imagen dentro de él.

Si este es el caso, necesitará falsificar esto con transformaciones y algunos hackers inteligentes y debería usar la opacidad como parte de este esfuerzo, tenga en cuenta que esto también (como en la especificación anterior, justo debajo del estilo de transformación) causa el efecto de aplanamiento cuando no aplicado al nodo final. Supongamos que tiene una opacidad distinta de 1 en .el , está bien aquí ya que .el es el nodo final, pero si se aplicó opacidad a .scroll , se .scroll el mismo aplanamiento de .el que con el desbordamiento.

Todavía tengo que probar en iOS ya que carezco de acceso al dispositivo.

Nota: establecer un valor de desbordamiento que no sea visible para el cuerpo no causa este problema en la mayoría de los navegadores de escritorio que admiten transformaciones 3D. No sé sobre iOS / móvil.

Answer 4

Por favor, consulte esta demostración: http://codepen.io/tushar-chauhan/pen/yNgzem

Puede intentar ajustar los valores para obtener los resultados deseados. Esto funciona en Safari móvil y de escritorio. Estoy publicando el HTML y CSS aquí también:

CSS y HTML a continuación:

body{
  width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
.pers{
  -webkit-transform-style: preserve-3d;
  -webkit-perspective: 300px;
  height: 120vh;
  margin: 0 auto; overflow-y: auto;
}
.scroll {
  height: inherit;
  -webkit-overflow-scrolling:touch;
}
.el {
  width: 10em; height: 10em; background: url(http://placehold.it/200x200);background-size:cover;
  margin: 80vh auto;
  -webkit-transform-origin: 50% 35%;
  -webkit-transform: rotateX(80deg);
  transform: rotateX(80deg);
}

<div class="pers">
  <div class="scroll">
    <div class="el">
    </div>
  </div>
</div>