Mobile Safari bug sur le bouton positionné fixe après que scrollTop ait été modifié par programme ...?

Question

Je suis à peu près terminé une page web, mais il ya un bug dans le navigateur Safari Mobile (iPhone et iPad iOS 5.0.1) avec deux boutons qui sont fixées à la partie supérieure et inférieure droite..

Les boutons ne sont pas fanées dans jusqu'à ce que après avoir cliqué sur soumettre sur une zone de texte qui s'ouvre pour le reste de la page... Après le reste de la page est chargée et les boutons sont fanées, vous pouvez cliquer sur l'une d'elles et ils travaillent tous les deux...

Cependant, en cliquant sur les causes des programmes de défilement et d'après ce livre est complet, vous pouvez plus cliquer sur un des boutons jusqu'à ce que vous physiquement défiler la page avec votre doigt, même juste un tout petit pixel de défilement...

Ce que j'ai remarqué, c'est que, après la programmation de défilement si vous appuyez légèrement sous le bouton du HAUT, vous voyez le mettre en évidence, comme si vous étiez en appuyant sur le bouton du BAS et de l'action de la touche de commande inférieure est traitée, ce qui me dit que le bug est que lorsque le défilement par programmation de la position fixe bouton se déplace encore avec le reste de la page et de ne pas revenir à la position fixe jusqu'à ce qu'une réelle touche de défilement est effectuée....

Quelqu'un sait-il un moyen de contourner cela..?

J'ai ajouté un popup qui indique quel bouton a été pressé de sorte que vous pouvez le tester, n'oubliez pas après la première pression sur le bouton du bas (qui fonctionne) en essayant de presser encore une fois, ça ne marchera pas, mais cliquez juste en dessous sur le bouton haut et vous verrez le bouton vers le bas les actions qui se passe....

http://www.tsdexter.com/ceos

merci pour l'aide.

Thomas

(aussi, si vous pouvez m'indiquer où je peux soumettre un bug à Apple, ce serait bien aussi, sauf si on a déjà été)

EDIT: il suffit de cliquer soit de la soumettre des flèches, vous n'avez pas besoin d'entrer un salaire/salaire, il a par défaut

EDIT 2: Voici un exemple simple pour montrer le même problème..

http://www.tsdexter.com/MobileSafariFixedPosBug.html

EDIT 3: Bug signalé à Apple

Answer 1

Nous avons aussi rencontré ce bug sur 2 différentes applications iPad, pour nous, la meilleure solution était de supprimer temporairement la position fixe de l'élément fixe une fois le défilement animée eut fini, puis utilisez la fenêtre.faites défiler jusqu'à la verticale de la valeur, que nous venions effectué l'animation de défilement, puis, enfin, appliquer à nouveau la position fixe de style. Il est la cause d'un très blip mineur que l'ipad ré-rendu de l'élément, mais ses préférable à l'erreur.

var $fixedElement = $('#fixedNavigation');
var topScrollTarget = 300;
$("html:not(:animated),body:not(:animated)").stop().animate({ scrollTop: topScrollTarget }, 500, "swing", function(evt) {
    $fixedElement.css({ "position": "relative" });
    window.scroll(0, topScrollTarget );
    $fixedElement.css({ "position": "fixed" });
});

Answer 2

J'ai eu autour de lui par l'ajout d'un 101% haute div puis (presque) immédiatement à l'enlever.

Essayez:

<style>
.iosfix {
  height: 101%;
  overflow: hidden;
}
</style>

et lorsque vous faites défiler:

window.scrollTo(0, _NEW_SCROLLTOP_);
$('body').append($('<div></div>').addClass('iosfix'));
setTimeout(function() {
  $('.iosfix').remove();
}, 500);

Il travaille également avec jQuery.scrollTo.

Voir un exemple ici.

Answer 3

J'ai eu plusieurs liens sur des éléments fixes (modal popup + fixe blackout div + fixe normale de la barre d'outils) et aucune de ces réponses étaient de travail, donc j'ai eu un bricoleur à essayer de variations sur le même thème. Comme tous ces suggérer la clé est d'obtenir des éléments de ré-rendu.

Au départ, j'ai essayé d'ajouter 1px à la largeur des éléments fixes et le retirer. Cela a entraîné des re-rendu, mais re-rendus des éléments est devenu mal alignée avec les re-rendus des éléments - une autre conséquence de cet iOS bug je soupçonne. La réponse a été tout simplement ajouter à la largeur du corps et de la soustraire à nouveau (ou à auto), c'est à dire:

//jQuery will calculate the current width and then +1 to this and set it
$('body').css('width', '+=1');

//Remove width css
setTimeout(function() {
  $('body').css('width', '');
}, 1);

Si vous n'utilisez pas de jquery, vous aurez besoin d'obtenir la largeur actuelle de corps +1px et puis définissez la largeur.

Answer 4

Voici ma solution si comme moi, aucune de ces solution est de travailler pour vous.

Le truc, c'est:

• Faire de votre barre de défilement (animation ou de scrollTo, etc.)
• Juste après votre parchemin, position:absolute vos éléments fixes
• Sur le touchmove de l'événement, restaurer la position:fixed

Voici un exemple:

  $('body').animate({
       scrollTop: newPos}, 1000, 'jswing', function () {
          $('header').css({position:'absolute', top:newPos});
  });

  $(document).bind('touchmove',function(){
       $('header').css({position:'fixed', top:'0px'});
  });   

J'ai utilisé la même astuce pour collant, pied de page et d'autres flottante éléments fixes.

Answer 5

Une variante de cette travaillé pour moi aussi. Essayez de ne pas utiliser des cadres de où je peux sur mobile.

    var d = document.createElement("div");
    d.style.height = "101%";
    d.style.overflow = "hidden";
    document.body.appendChild(d);
    window.scrollTo(0,scrollToM);
    setTimeout(function() {
    d.parentNode.removeChild(d);
    }, 10);