Jquery toggle () раздражает мерцание в Safari

Question

У меня проблемы с простым переключением в Safari. Действительно раздражающее мерцание в конце анимации скрытия. Кто-нибудь?

CSS

#menu {
    position:absolute;
    left: 30px;
    top: 30px;
    padding: 30px;
    background: #FF0;
}

#content {
    width: 400px;
    display: none;
}

Javascript

$(document).ready(function() {
    $('#menu').click(function() {
        $('#content').toggle(700);
    });
});

Демонстрация

http://jsfiddle.net/DBeg9/

http://www.clapclap.se/test/toggle.html

Answer 1

Попробуйте изменить линию переключения на:

$('#content').toggle(700,'linear');

Answer 2

Кажется, есть проблема с установкой ширины / высоты в 0, что должно происходить в конце анимации toggle непосредственно перед установкой display: none. Единственный способ выяснить, как это исправить, это сделать анимацию длинным путем:

var $c = $('#content'),
    cw, ch;

$c.show();
cw = $c.width();
ch = $c.height();
$c.hide();

$('#menu').toggle(function() {
    $c.css({
        'width': 1,
        'height': 1,
        'opacity': 0
    }).show().animate({
        'width': cw,
        'height': ch,
        'opacity': 1
    }, 700);
}, function() {
    $c.animate({
        'width': 1,
        'height': 1,
        'opacity': 0
    }, 700, function() {
        $c.hide();
    });
});

См. Демонстрацию