Элемент мерцает перед исчезновением при скрытии с помощью .animate ({width: 'hide'}), но только в Chrome - PullRequest
2 голосов
/ 13 ноября 2011

Эта проблема возникает в Chrome / Chromium (в Linux и Windows): когда я использую JQuery, чтобы скрыть элемент с .animate({width: 'hide'}), элемент сжимается, затем на долю секунды возвращается к исходному размеру, а затем мгновенно исчезает .

Я сделал скрипку: http://jsfiddle.net/FyDWE/4/

В IE9 и Firefox все работает как положено.

Заранее спасибо!

1 Ответ

5 голосов
/ 13 ноября 2011

Я не смог найти обходной путь (в случае, если вы должны использовать width: 'hide'), но я смог найти то, что мне кажется очень странной ошибкой браузера, когда я отредактировал ядро ​​jQuery fx, чтобы оно возвращалось в точке мерцания.

Вот jsfiddle:

http://jsfiddle.net/FyDWE/9/

Когда вы покидаете мышь, анимация начинает уменьшаться, и она внезапно изменяется до полного, когда достигает конца. Теперь это ваш источник мерцания, и он останавливается там из-за редактирования jQuery.

Если вы сейчас отредактируете атрибут стиля анимируемого .options span element, вы увидите, что он имеет display: inline-block; overflow-x: hidden; overflow-y: hidden; width: 0px;

Теперь, если вы измените width на 1px, (display: inline-block; overflow-x: hidden; overflow-y: hidden; width: 1px;) он внезапно полностью уменьшится.

Так что я думаю, что мерцание происходит от этого: анимация достигает 0px, что означает внезапное полное изменение размера в chrome, как показано в приведенном выше jsfiddle, и затем элемент скрывается. При попытке связать jsfiddle в IE9 состояние замораживания мерцания является нормальным даже при ширине: 0px черная полоса отсутствует, как в chrome.

редактирование:

Вот мой обходной путь для ошибки, если возможно решение, не использующее width: 'hide':

http://jsfiddle.net/FyDWE/10/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...