jQuery slideToggle scintillement dans Firefox

J'ai une situation spécifique avec slideToggle qui crée un scintillement dans Firefox.jQuery slideToggle scintillement dans Firefox

La situation se présentait lorsque l'élément d'expansion dépassait la taille de la page et qu'une barre de défilement verticale apparaissait dans Firefox. Si vous faites défiler vers le bas pour lire tout le texte dans l'élément d'expansion, puis cliquez sur le déclencheur pour fermer l'élément, Firefox clignotera pendant une seconde, puis la page réajustera et retournera à sa position avant que l'élément développé ne soit étendu. J'ai essayé d'ajouter 'return false' en vain.

Voici une page de test où vous pouvez voir l'effet dans FF lorsque vous cliquez pour fermer le dernier élément (Tisanes): http://pollak-labs.com/clients/birthyourself/?page_id=21

Source

2009-11-25 Stepppo

Je pensais que j'avais la réponse à cela (quelque chose sur le positionnement fixe vs absolu/relatif), mais après avoir testé cette théorie dans firebug, il semble que cela n'a aucun effet. – Greg

@Greg, c'est ce que je pensais au début. Mais c'est le navigateur qui essaie d'en faire trop à la fois je pense. –

Je pense que la raison pour laquelle ce qui se passe, parce que par l'élément glissant vers le haut, la hauteur de la page devient plus courte. Firefox ne peut pas redessiner la page, modifier la hauteur, faire défiler la fenêtre et animer votre élément en même temps.

Voici ce que j'utiliserais pour tenter de résoudre le problème. L'effet secondaire potentiel serait, s'ils ouvraient toutes les boîtes et les fermaient un par un, vous vous retrouveriez avec beaucoup d'espace blanc. Cependant, vous n'aurez pas les flashes à proximité. Vous avez également le même problème sur ouvert si vous faites défiler vers le bas de la page. La ligne de défilement $('html,body') répond que:

$(".question").click(function(){ 
    var $animator = $(this).next(".answer"), 
     $post  = $animator.closest('.post'); 
    if($animator.is(':visible')){ 
     $post.css('min-height', $post.height()); 
     $animator.slideUp("slow"); 
    } else { 
     $('html, body').scrollTop($('html, body').scrollTop() - 1); 
     $animator.slideDown("slow", function(){ 
      $post.css('min-height', 0); 
     }); 
    } 
});

Source

2009-11-25 06:50:56

Merci, dcneiner. Votre code coupe le scintillement et je pense que je peux vivre avec l'espace blanc supplémentaire. Je serais toujours intéressé de savoir pourquoi FF ne peut pas redessiner la page, etc. mais IE et Chrome semblent bien gérer le slideToggle. – Stepppo

jQuery essaie de faire trop de choses en même temps, et dans le processus, il est rogner, faire des choses illégales. Par exemple, tout en obtenant les dimensions d'un élément, il le met réellement à jour. Ce n'est pas un bug dans FireFox, c'est un bug dans jQuery. Vous pouvez le voir ici:

Firefox: Showing hidden Element containing scrollable Content causes Page Flicker

Lorsque vous étudiez, vous découvrirez quelques petites choses qui pourraient vous aider à éliminer votre problème tout à fait, peut-être en remplaçant le comportement jQuery. Ou déposer juste un autre bug :)

Source

2010-03-08 04:32:41 user250343

Oui, « hack » a résolu mon problème de scintillement de Doug Neiner dans Firefox et IE6 mais a créé un autre problème dans Safari, donc je l'ai changé à:

$('html').scrollTop($('html').scrollTop()-1);

Maintenant, il fonctionne parfaitement dans tous les navigateurs.

Source

2010-07-31 19:04:51

jQuery slideToggle scintillement dans Firefox

Répondre

Questions connexes