Développement iOS
  1. Développement iOS
  3. iOS Safari + CSS calc () + CSS transition = Crash instantané
Intereting Posts
Comment séparer emojis entré (par le keyboard par défaut) sur le champ de text iOS, Comment find la ligne sélectionnée de UITableView? Pourquoi utiliser la déclaration avant plutôt que l'import dans le file .h? objective c renderInContext plantage sur le fil d'arrière-plan Impossible de pousser le controller de vue après avoir surchargé openURL Comment définir le champ de text horizontal en mode paysage avec la layout automatique? Comment puis-je spécifier une icône iPad Retina dans XCode 4.3 pour une application iPhone uniquement? Comment utiliser par programme les synthétiseurs vocaux iOS? (text pour parler) exception rapide de décompression de force non propagée Soumettre à des problèmes App Store: Architecture non prise en charge x86 scaledValueForValue: appelé sur une police qui n'a pas de jeu de style de text NSDateFormatter pour datetime Comment append une sous-vue dans UIAlertView pour iOS 7? Mon application préliminaire a été «traitement» pendant plus d'une semaine dans iTunes Connect, ce qui donne? Fichier AST mal formé ou corrompu

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

Quand j'essaie d'utiliser left: -webkit-calc(100% - 100px); (en supposant que left: 0; est l'état initial) il fonctionne très bien dans iOS 6.0.1. Mais quand je fais la même chose avec la transition: left 1s linear; il plante instantanément Safari, à chaque fois. Est-ce connu bug 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.

Vous pouvez résoudre ce problème en initialisant la propriété avec tout sauf auto: 

 .menu { left: 0; transition: left 1s linear; } .menu-open .menu { left: -webkit-calc(100% - 50px); left: calc(100% - 50px); }

Cela a été un bug WebKit depuis un certain time maintenant. Pour l'instant, vous pouvez utiliser JS pour accomplir le même effet final.

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

Qu'est-ce que le travail travaillait autour de la déclaration calc utilisant une marge négative: 

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

Malheureusement, je devais le faire pour accomplir une tâche similaire: 

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

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é

Je suis tombé sur ce même problème après avoir passé beaucoup de time à tester mon design réactif, pas iOS mobile, dans Chrome. Il y avait beaucoup d'éléments "élastiques" en place donc je voulais une solution qui pourrait couvrir tous au less pour une version antérieure.

Si vous faites un design responsive en utilisant purement CSS un hack pour l'empêcher de s'écraser au less est: 

 @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 en place, donc je devais le faire de cette façon.

Cette solution pourrait être meilleure car elle aura un certain chevauchement avec les gens utilisant 1024 moniteurs et Android, mais j'ai utilisé max-device-avec à la place de max-width pour éviter le chevauchement avec les petites windows. Je suppose que 1024 users de moniteur n'utilisent probablement pas un browser moderne, mais que vous souhaitez corriger le chevauchement Android.

mettre en place ce petit test pour voir si jamais il se fixe. actuellement, il bloque mac safari 6.0.5 et iOS safari.

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