Почему мой анимированный CSS оставляет артефакты (в Chrome)?

Question

Если вы посмотрите на http://keepskatinbro.com в Chrome, вы заметите, что после того, как вы наводите курсор на заголовки, после того, как вы наведите курсор мыши, по бокам заголовков останутся артефакты.

Я получил идею от http://desandro.com (посмотрите внизу страницы). Но у Десандро нет артефактов.

Вот HTML:

<h1 id="logo">
    <a class="" id="home_link" href="http://keepskatinbro.com/" title="Keep Skatin' Bro" rel="home">
        <span id="keep">KEEP</span><br>
        <span id="skatin">SKATIN'</span><br>
        <span id="bro">BRO</span>
    </a>
</h1>

Вот CSS:

#header{
    margin-bottom:30px;
    background:#FFF;
    border-bottom:1px solid rgba(0,0,0,0.15);
}
    #header h1 a{
        color:#757575;
        text-shadow: 1px 1px #181818, 2px 2px #181818, 3px 3px #181818, 4px 4px #181818, 5px 5px #181818, 6px 6px #181818, 7px 7px #181818, 8px 8px #181818;
        /*-moz-text-shadow:2px 2px 2px rgba(0,0,0,1);*/
    }
        #header h1 a:hover{
            color:#fff;
            text-shadow: 1px 1px #58e, 2px 2px #58e, 3px 3px #58e, 4px 4px #58e, 5px 5px #58e, 6px 6px #58e, 7px 7px #58e, 8px 8px #58e, 9px 9px #58e, 10px 10px #58e, 11px 11px #58e;
        }

Почему у меня может быть эта проблема? Я заметил это раньше, когда создавал другие сайты только в Chrome ... Кажется, у Desandro нет артефактов на desandro.com.

Answer 1

Извините, я не могу комментировать.Можете ли вы записать свой код?

Кстати, просто попробуйте изменить mouseout на mouseleave событие или наоборот .

РЕДАКТИРОВАТЬ

Кажется, что Chrome плохо обрабатывает события при наведении (вы можете проверить это, оставив логотип осторожно ).

Принудительная отрицательная прозрачная тень, когда ссылкане парить:

#header h1 a {
    color: #757575;
    text-shadow: 1px 1px #181818, 2px 2px #181818, 3px 3px #181818, 4px 4px #181818, 5px 5px #181818, 6px 6px #181818, 7px 7px #181818, 8px 8px #181818, -1px -1px transparent, -2px -2px transparent, -3px -3px transparent;
}