How come my animated CSS leaves artifacts (in Chrome)?

If you look at http://keepskatinbro.com in Chrome, you'll notice that after you hover on titles that there will be artifacts left behind on the sides of the titles after you un-hover.

I got the idea from http://desandro.com (look at the bottom of the page). But Desandro's has no artifacts.

Here's the 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>开发者_Python百科
    </a>
</h1>

Here's the 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;
        }

Why might I have this problem? I've noticed it before when making other sites only in Chrome it seems... Yet Desandro doesn't have the artifacts on desandro.com.

Sorry cannot comment yet. Can you write your code down?

By the way, just try to change the mouseout with mouseleave event or viceversa.

EDIT

It seems a Chrome bad hover event handling (you can test it by leaving the logo gently).

Force a negative, transparent shadow when the link is not hover:

#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;
}