jQuery SlideToggle 在 Firefox 中闪烁

Question

我遇到了 SlideToggle 的特殊情况，它会在 Firefox 中产生闪烁。

情况是当扩展元素比页面长并且 Firefox 中出现垂直滚动条时。

如果您向下滚动以阅读展开元素中的所有文本，然后单击触发器关闭该元素，Firefox 将闪烁一秒钟，然后页面重新调整并返回到展开元素展开之前的位置。 我尝试添加“return false;”无济于事。

这是一个测试页面，您可以在 FF 中看到点击关闭最后一个项目（Herbal Teas）时的效果： http://pollak-labs.com/clients/birthyourself/?page_id=21

Answer 1

我认为发生这种情况的原因是因为通过项目向上滑动，页面高度变得越来越短。 Firefox 无法同时重绘页面、更改高度、向上滚动视口以及为元素设置动画。

这是我用来尝试解决问题的方法。潜在的副作用是，如果他们打开所有盒子并一一关闭它们，您将留下大量空白。但是，您不会关闭闪光灯。如果您滚动到页面的最底部，打开时也会遇到同样的问题。 $('html,body') 滚动行解决了以下问题：

$(".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);
        });
    }
});

Answer 2

jQuery 试图同时做太多事情，而在这个过程中，它正在偷工减料，做非法的事情。例如，在获取元素的尺寸时，它实际上会更新它。这不是 FireFox 中的错误，而是 jQuery 中的错误。您可以在这里看到它：

Firefox：显示包含可滚动内容的隐藏元素会导致页面闪烁

当您学习时它，您会发现一些可能帮助您完全消除问题的事情，可能是通过覆盖 jQuery 行为。或者只是提交另一个错误:)

Answer 3

是的，Doug Neiner 的“hack”解决了我在 Firefox 和 IE6 中的闪烁问题，但在 Safari 中造成了另一个问题，所以我将其更改为：

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

现在它在所有浏览器中都能完美运行。