• touchOverflow : améliorations considérables
• Comment cela fonctionne t il ?
• Quelques inconvénients
• Quels sont les mobiles supportant l'overflow ?
• Débogage touchOverflow

touchOverflow : transitions de page considérablement améliorée et avec de vraies barres d'outils fixes

Actuellement, tant la page que vous voyez que celle naviguer à sont situées côte à côte dans la fenêtre d'affichage, ce qui nous permet de tirer parti du défilement natif pour le plus large soutien possible de dispositif. L'inconvénient de cette approche est que puisque les deux pages partagent le même viewport, au démarrage d'une transition entre pages, nous devons tout d'abord faire un défilement vers le haut du document, puis débuter l'animation pour s'assurer que les pages sont alignées verticalement. Si vous tapez sur le bouton 'Précédent', nous devons effectuer un défilement vers le haut, puis la transition, et enfin rétablir la position précédente par défilement. Étant donné que les navigateurs mobiles sont assez lents, ces mouvements de défilement peuvent ralentir la navigation.

La meilleur façon d'améliorer cette situation est d'avoir les deux pages dans des conteneurs distincts, chacun d'eux ayant sa propre barre de défilement interne. Les moyens ne plus faire défiler le document ou besoin de restaurer la position par défilement pour une navigation plus fluide. Il a également l'avantage de rendre fixes de barres d'outils très faciles à mettre en œuvre en les plaçant simplement à l'extérieur des conteneurs avec défilement interne.

Comment cela fonctionne t il ?

Pour tirer parti d'iOS5 pour une version tactile de overflow:auto qui permet de faire défiler des régions internes avec le défilement dynamique natif, nous avons ajouté une fonctionnalité appelée touchOverflow qui exploite ces nouvelles capacités CSS pour nous permettre d'apporter à la fois de vraies barres d'outils "fixed" et des transitions super fluides à iOS5, tout en utilisant les standards du web et très peu de code supplémentaire.

Une fonctionnalité appelée touchOverflowEnabled est conçue pour tirer parti de la vague à venir des navigateurs qui prennent en charge de dépassement de capacité de défilement en CSS. Notez que cette fonctionnalité est désactivée par défaut pour nous donner plus de temps pour tester et déboguer cela pour de meilleures performances mais nous espérons pouvoir l'activer par défaut dans l'avenir. Voici comment faire pour activer cette option globale :

<script>
	$(document).bind("mobileinit", function(){
		$.mobile.touchOverflowEnabled = true;
	});
</script>

Lorsque cette fonctionnalité est activée, le framework vérifie si le navigateur supporte les propriétés CSS overflow: et -webkit-overflow-scrolling:touch. Dans les navigateurs supportant les deux, il bascule vers un modèle de conteneur à double page avec le défilement overflow: natif dans chaque, ce qui permet d'obtenir de vraies transitions fluides des barres d'outils fixes. Couplé avec des transitions de matériel accéléré déjà excellent d'iOS, il est maintenant possible de construire des interfaces très proches des performances natives.

Pour la démo de cette fonctionnalité, consultez cette page avec iOS5.

Quelques inconvénients

Rien n'est jamais parfait, en particulier pour une nouvelle fonctionnalité, aussi il existe quelques inconvénients que vous devez garder à l'esprit. En activant cette fonction :

• Parfois les éléments enfants, tels que les listes et les formulaires, ne s'affichaient pas correctement lorsqu'ils étaient incorporés dans une page avec overflow: dans iOS5. Il s'agissait là d'un phénomène assez aléatoire, mais non acceptable, aussi nous avons ajouté une propriété CSS translate-z qui force iOS à rendre le contenu correctement. L'inconvénient de cette correction est que, lorsqu'une transformation est appliquée, tous les éléments sont définis sur position:relative ce qui peut provoquer des problèmes dans votre mise en page.
• La propriété -webkit-overflow-scrolling:touch semble désactiver les événements to scroll you to the top of the page when the time is tapped in the status bar. Nous espérons qu'Apple corrigera ce bug, car cette fonctionnalité est très utile.
• Lorsque les propriétés overflow: et -webkit-overflow-scrolling:touch sont fixées, iOS semble ignorer toutes les propriétés overflow:hidden sur le parent, qui est la page dans le cas présent. Donc si vous avez un bloc image ou code qui est plus large que la fenêtre d'affichage, le défilement horizontal sera visible.
• Lorsque cette fonction est active, nous désactivons le zoom utilisateur en manipulant la balise meta viewport car aussi bien les barres d'outils et le contenu de la page peuvent facilement être zoomés pour une taille quelconque et il est très difficile de faire un zoom arrière. Même si nous croyons en permettant aux utilisateurs de zoom de la page, il est plus important d'atténuer les préoccupations de convivialité que nous avons avec barres d'outils fixes et débordement de conteneurs.
• La position de défilement peut être perdue lors du retour en arrière vers une page qui a été rechargée. Si la mise en cache dans le DOM est sûre, cela ne devrait pas être autant d'une question.
• Il s'agit encore d'une fonctionnalité expérimentale, donc tous les problèmes ne sont pas connus. A utiliser avec prudence et à tester à fond.

Quels sont les mobiles supportant l'overflow ?

Oui, mais il y a un hic. Tant Android Honeycomb que Blackberry PlayBook supportent les propriétés overflow:, mais nous avons trouvé, lors de nos tests, que leur mise en œuvre de l'overflow n'était pas assez fluide, donc le défilement des pages était saccadé et se bloquait, rendant l'application inutilisable. Nous travaillons avec les fabricants d'appareils afin de s'assurer qu'ils seront inclus lorsque leurs performances s'amélioreront.

Plus important encore, le ciblage correct de l'overflow est un enjeu majeur. Si nous plaçons simplement la règle CSS overflow: auto sur les pages, les autres plateformes mobiles populaires, telles que les versions anciennes d'Android ou iOS, ignoreront la plupart du temps le contenu le rendant ainsi inaccessible (oui, vous pouvez effectuer un défilement à l'aide de deux doigts dans iOS mais personne ne le sait). La chose intelligente sur l'implémentation d'Apple pour iOS5 et qu'il a été ajouté une propriété CSS -webkit-overflow-scrolling:touch qui nous permet de tester l'existence de cette propriété et, si elle est supportée, d'ajouter ces régles overflow que pour ces navigateurs. C'est la seule manière sûre de cibler overflow sans recourir à la détection de l'agent utilisateur complexe et ingérable.

Nous allons travailler avec les fabricants d'appareils et de navigateurs, afin d'encourager le soutien pour ces deux propriétés CSS parce que nous croyons fermement que cela est un élément critique nécessaire à la construiruction d'applications web mobiles riches. Le projet va ajouter tout ajout de préfixe du vendeur à toucher la propriété de défilement si, par exemple, Opera, Firefox ou Microsoft ajouté ce soutien. Une fois que les gens voient à que point les transitions entre pages sont améliorées et les barres d'outils fixes sont dans iOS5, nous espérons que cela sera rapidement soutenu par les autres navigateurs. Les scripts de défilement de page basés sur JavaScript ont encore leur place dans ce nouveau monde comme polyfill pour les navigateurs qui ne supportent pas encore ces nouvelles fonctionnalités CSS, mais nous voyons cela comme une brève, un outil provisoire dans l'évolution du web mobile.

Débogage touchOverflow

Généralement touchOverflow est activé uniquement sur les appareils qui prennent en charge le défilement tactile des zones de débordement, pas les navigateurs de bureau. Cela peut rendre difficile le débogage des problèmes liés à la fonction touchOverflow. Pour activer touchOverflow sur tous les navigateurs, utilisez le code suivant :

<script>
	$(document).bind("mobileinit", function() {
		$.support.touchOverflow = true;
		$.mobile.touchOverflowEnabled = true;
	});
</script>