Странный эффект "встряхивания" при анимации ширины с помощью jQuery (только в Chrome!)

Я анимирую ширину li элемент с использованием jQuery в простом фрагменте кода. Я использую hover() как обработчик и .animate() для анимации ширины. Вот мой код.

$('li').each(function() {
    //store the original width of the element in a variable
    var oldWidth = $(this).width();
    $(this).hover(
        function() {
            //when the mouse enters the element, animate width to 900px
            $(this).animate({width: '900px'}, 600, 'linear')
        },
    function() {
            //when the mouse leaves, animate back to the original width
            $(this).animate({width: oldWidth}, 350, 'linear')
        }
   );
}); 

код действительно очень прост и работает но С одной очень странной причудой в Chrome. При анимации элементов in и out,li элементы "дрожат", как будто они действительно холодные и дрожат. Вы можете увидеть поведение здесь в живом примере: http://missmd.org/ (edit: ошибка теперь исправлена)

Я анимировал кучу вещей раньше с jQuery и никогда не видел такого поведения. Есть ли объяснение, почему это происходит и как я могу обойти это? Мне интересно, потому ли это, что я переместил элементы вправо и оживляю влево. Ошибка сводит с ума и сильно отвлекает от общей презентации (по крайней мере, для меня). Кто-нибудь видел это раньше?

редактировать уточните: это не li элемент, который "дрожит", это текст внутри него, который слегка, но заметно дрожит слева направо очень быстро по мере запуска анимации. Я в тупике.

редактировать два: после возни с CSS немного теперь я могу воспроизвести эффект только в Chrome (21.0.1180.60 beta-m для меня). В Firefox он работает по назначению. Он также отлично работает в IE. Очень иронично, что Chrome (обычно отличный с этим материалом) дает теперь у меня проблемы. выдергивает волосы, проверяет здравомыслие

вот мой HTML, чтобы помочь добраться до сути этого. Мы воспроизвели проблему в jsFiddle Крисфрансиса.

<nav>
    <ul class="nav">
        <li class="one">
            <a href="homeandnews/">
                <span class="title">Home and News</span>
                <br/>
                <span class="subtitle">Learn more about me and read general updates!</span>
            </a>
        </li>
    </ul>
<nav>

Я совершенно в тупике. Это также может быть ошибка в Chrome / V8 JS engine, и мы ничего не можем с этим поделать.

5 ответов


Я изменил ваш css:ul.nav li a добавление float: right к нему и что исправить встряску.

в любом случае, если это поможет, у меня была та же проблема при анимации высоты div в другом div с высотой:auto. Изменение высоты на ширину fix решило это.

надеюсь, что это помогает.


Я смотрел на эту проблему, а также и это:-webkit-backface-visibility: hidden; решить мою проблему. Я добавляю это странное встряхивание при использовании преобразования CSS3 на SVG.

больше информации можно найти здесь:CSS3 преобразование поворот вызывает сдвиг 1px в Chrome

надеюсь, что это помогает


Это, кажется, ошибка в Chrome версии 21.0.1180.60 и может присутствовать в других версиях. Ничего плохого в коде здесь нет, и я думаю, мы просто оставим его обходным путем или отправим отчет об ошибке сейчас.

вздох.


эта проблема возникла с divs, когда я пытался оживить другой div внутри него. Я заметил, что это происходит, если div или элемент имеет свойство css display:inline-block. Создание элемента float решило бы проблему, но inline-block было необходимо в моем случае.

я заметил, что элемент также vertical-align:middle свойство css. Изменение его на vertical-align:text-bottom решена проблема. Нет больше эффекта встряхивания в Chrome v23 (возможно, ошибка все еще сохраняется в новая версия.)


была аналогичная проблема с встряхиванием SVGs, когда есть переход CSS, примененный к родительскому тегу. Я попытался применить все, что мог случайным образом, и это исправление, наконец, помогло:

svg {
  transform: translate3d(0, 0, 0);
}