Défilement de débordement Webkit tactile bug CSS sur iPad

Si vous visitez cette page sur votre appareil iPad sur la dernière version d'iOS, vous pouvez suivre.

http://fiddle.jshell.net/will/8VJ58/10/show/light/

J'ai deux éléments avec le nouveau –webkit-overflow-scrolling: touch; propriété et valeur appliquée. La zone grise de la main gauche contient beaucoup de contenu et défile en mode portrait ou paysage. La droite défilera uniquement dans le paysage.

Si vous démarrez en mode paysage (rafraîchissement en paysage), vous pouvez faire défiler les deux zones avec le défilement à inertie. Fonctionne très bien. Maintenant, returnnez votre iPad en mode portrait et seule la partie gauche défilera. C'est comme prévu. Mais lorsque vous returnnez au paysage, la zone de la main droite ne défile plus du tout, tandis que la zone de la main gauche est toujours correcte.

C'est évident comment arrêter cela, mais je n'ai pas toujours le contenu pour remplir la zone.

Donc des idées?

Merci d'avance,
Volonté 🙂

J'ai vraiment le même problème. Je l'ai réduit au fait qu'il affecte les DIV dont le contenu ne nécessite plus de défilement lorsque l'orientation est modifiée.

Dans votre exemple. Le DIV sur la droite défile dans le paysage, n'a pas besoin de faire défiler en mode portrait, mais doit ensuite défiler à nouveau. J'ai testé ceci quand les deux DIV (gauche et droite) doivent défiler indépendamment de l'orientation et ce n'est pas un problème.

METTRE À JOUR:

En fait, j'ai l'air d'avoir réparé ça!

Le problème semble être un problème de synchronisation. Pendant le redimensionnement, le contenu interne n'est pas assez grand pour justifier le défilement sur le DIV externe qui a un débordement. Après avoir perdu un jour là-dessus, j'ai finalement trouvé ce hack:

<div id="header" style="position:fixed; height:100px">Header</div> <div id="content" style="overflow: auto; -webkit-overflow-scrolling: touch"> <div id="contentInner"> content that is not long enough to always scroll during different orientations </div> </div> 

Voici ma logique à chaque fois que la page est redimensionnée:

  function handleResize() { var iHeight = $(window).height() - $("#header").height(); // Height needs to be set, to allow for scrolling - //this is the fixed container that will scroll $('#content').height(iHeight - 10); // Temporarily blow out the inner content, to FORCE ipad to scroll during resizing // This is a timing issue where the inner content is not big enough during resize post orientation to require the outer DIV to scroll $('#contentInner').height(1000); // Set the heights back to something normal // We have to "pause" long enough for the re-orientation resize to finish window.setTimeout(delayFix, 10); } function delayFix() { var iHeight = $(window).height() - $("#header").height(); // Inner divs force the outer div to always have at least something to scroll. This makes the inner DIV always "rubber-band" and prevents // the page from scrolling all over the place for no reason. // The height of the inner guy needs to be AT LEAST as big as the container and actually a nip bigger to cause the // scrollable area to 'rubber band' properly $('#contentInner').height(iHeight + 20); } 

Venir en retard avec une solution similaire, mais plus simple.

 var $el = $('.myElementClass'); function setOverflow(){ $el.css({webkitOverflowScrolling: 'touch', overflow: 'auto'}); } function resizeHandler(){ $el.css({webkitOverflowScrolling: 'auto', overflow: 'hidden'}); setTimeout(setOverflow,10); } 

[EDIT] Attention , après avoir expérimenté (beaucoup), j'ai découvert que l' display:none déclaration va sûrement casser le webkit-overflow-scrolling: touch fonction webkit-overflow-scrolling: touch . Ne l'utilisez jamais sur des éléments (ou des parents d'éléments) censés supporter le défilement tactile.

J'ai été en mesure d'utiliser un "correctif" connu pour forcer un rafraîchissement iOS6 pour corriger ce problème sans avoir à utiliser setTimeout.

 $(window).on('orientationchange', function() { var $elem=$('[selector]'); var orgDisplay=$elem.css('display'); $elem.css('display','none'); $elem.get(0).offsetHeight; $elem.css('display',orgDisplay); }); 

J'ai vécu le même bug sur iPhone, iPod et iPad. Ceci n'est pas limité à ce dernier seulement.

J'ai essayé tout ce qui a été suggéré pour être une solution, mais finalement la combinaison douce a fini par détacher l'élément, l'ajoutant à son conteneur et lui assignant explicitement sa propre hauteur tout en faisant ceci, comme ceci:

 $(window).on('orientationchange', function(){ var el = $('.troublemaker').detach(), elh = el.height(); setTimeout( el.css({'height':elh+'px'}).appendTo('.container'), 50 ); });