web-dev-qa-db-fra.com

iOS Safari + CSS calc () + CSS transition = Crash instantané

Lorsque j'essaie d'utiliser left: -webkit-calc(100% - 100px); (en supposant que left: 0; est à l'état initial), cela fonctionne parfaitement dans iOS 6.0.1. Mais lorsque je fais la même chose avec transition: left 1s linear;, Safari se bloque instantanément, à chaque fois. Est-ce un bug connu ou est-ce que je fais quelque chose de mal?

Cela ne fonctionne pas non plus dans Safari 5 (pas de réaction). Mais cela fonctionne dans Firefox et Chrome.

ioscsssafaricss-transitions
27
Atadj

Vous pouvez résoudre ce problème en initialisant la propriété avec autre chose que auto:

.menu {
  left: 0;
  transition: left 1s linear;
}

.menu-open .menu {
  left: -webkit-calc(100% - 50px);
  left: calc(100% - 50px);
}
4
Guido Bouman

Aucune des réponses affichées jusqu'ici n'a fonctionné pour moi.

Qu'est-ce qui fonctionnait fonctionnait autour de la déclaration calc en utilisant une marge négative:

#example {
  left: 100%;
  margin-left: -100px;
}
2
meetalexjohnson

C’est un bug de WebKit depuis un certain temps maintenant. Pour l'instant, vous pouvez utiliser JS pour obtenir le même effet final.

2
Mooseman

Malheureusement, j'ai dû le faire pour accomplir une tâche similaire:

$('.modal').css({
  'height': $(window).height() - 40
});
0
Greg

Peut-être faire quelque chose comme ça:

.class{
    left: -webkit-calc(100% - 100px);
    transition: margin-left 1s linear, right 1s linear;
}


.class.open {
    margin-left: -100%;
    right: 100px;
}

AVERTISSEMENT: non testé

0
Jim Hall

J'ai rencontré ce même problème après avoir passé beaucoup de temps à tester ma conception responsive sous Chrome, non mobile iOS. Il y avait beaucoup d'éléments "élastiques" en place, je voulais donc une solution qui puisse les couvrir tous, du moins pour une version antérieure.

Si vous réalisez une conception réactive utilisant purement CSS, un hack pour l'empêcher au moins de planter est la suivante:

@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;
}

Je voulais garder les transitions de positionnement supérieures en place, donc je devais le faire de cette façon.

Cette solution serait peut-être meilleure, car elle recoupe parfois les utilisateurs de 1024 moniteurs et Android, mais j’ai utilisé max-device-with à la place de max-width pour éviter le chevauchement avec de petites fenêtres. Je suppose que 1024 utilisateurs de moniteurs n'utilisent probablement pas un navigateur moderne, mais souhaitent corriger le chevauchement Android.

0
Benjamin Watanabe

mettre en place ce petit test pour voir si cela se corrige un jour. actuellement, il plante Mac Safari 6.0.5 et iOS Safari.

http://jsbin.com/omexek/3/

0
twmulloy