vuejs - iOS Safari+CSS calc()+CSS transición=Instant Crash
vue tutorial (7)
Cuando trato de usar left: -webkit-calc(100% - 100px); (asumiendo que left: 0; es el estado inicial) funciona bien en iOS 6.0.1. Pero cuando hago lo mismo con la transition: left 1s linear; instantáneamente se bloquea Safari, cada vez. ¿Se sabe error o estoy haciendo algo mal?
Tampoco funciona en Safari 5 (sin reacción). Pero funciona en Firefox y Chrome.
Desafortunadamente tuve que hacer esto para realizar una tarea similar:
$(''.modal'').css({
''height'': $(window).height() - 40
});
Esto ha sido un error WebKit desde hace algún tiempo. Por ahora puedes usar JS para lograr el mismo efecto final.
Me encontré con este mismo problema después de pasar mucho tiempo probando mi diseño responsivo, no iOS móvil en Chrome. Había muchos elementos "elásticos" en su lugar, así que quería una solución que pudiera cubrirlos todos al menos para una versión anterior.
Si estás haciendo un diseño responsivo utilizando simplemente CSS, un hack para evitar que al menos se bloquee es:
@media (max-device-width: 1024px) {
* {
-webkit-transition: width 0, top .8s !important;
-moz-transition: width 0, top .8s !important;
-o-transition: width 0, top .8s !important;
transition: width 0, top .8s !important;
}
Quería mantener las transiciones de posicionamiento superior en su lugar, así que tuve que hacerlo de esta manera.
Esta solución podría ser mejor, ya que tendrá cierta superposición con personas que usan 1024 monitores y Android, pero usé max-device-with en lugar de max-width para evitar que se superponga con ventanas pequeñas. Supongo que 1024 usuarios de monitores probablemente no estén usando un navegador moderno, pero les gustaría arreglar la superposición de Android.
Ninguna de las respuestas publicadas hasta ahora funcionó para mí.
Lo que funcionó fue trabajar alrededor de la declaración de calc usando un margen negativo:
#example {
left: 100%;
margin-left: -100px;
}
Puede solucionar este problema inicializando la propiedad con cualquier cosa menos automática:
.menu {
left: 0;
transition: left 1s linear;
}
.menu-open .menu {
left: -webkit-calc(100% - 50px);
left: calc(100% - 50px);
}
Tal vez hacer algo como esto:
.class{
left: -webkit-calc(100% - 100px);
transition: margin-left 1s linear, right 1s linear;
}
.class.open {
margin-left: -100%;
right: 100px;
}
ADVERTENCIA: Sin probar
armar esta pequeña prueba para ver si alguna vez se arregla. Actualmente se bloquea Mac Safari 6.0.5 y iOS Safari.