Pulsing dot in CSS Chrome display issue

Question

I'm trying to create a pulsing dot effect with CSS.

HTML markup is simple:

<span class="map-pin pulse dark">
    <span></span>
</span> 

The CSS is like this:

@-webkit-keyframes pulse{
    0%{
        opacity:1;
        width: 16px;
        height: 16px;
    }
    50% {
        opacity:.5;
        -webkit-transform: scale(3);
    }
    100%{
        opacity: 0; 
    }
}
@-moz-keyframes pulse{
    0%{
        opacity:1;
        width: 16px;
        height: 16px;
    }
    50% {
        opacity:.5;
        -moz-transform: scale(3);
    }
    100%{
        opacity: 0; 
    }
}
.pulse{
    width: 32px;
    height: 32px;
    background: none;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    line-height: 16px;
    text-align: center;
}
.pulse>*{
    position: relative;
    border:1px solid #fa565a;
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    text-indent: -9000px;

    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    border-radius:30px;

    -webkit-transition-property:top, bottom, left, right, opacity, border-width;
    -webkit-animation-duration:2s;
    -webkit-animation-name:pulse;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(0,0,0,1);

    -moz-transition-property:top, bottom, left, right, opacity, border-width;
    -moz-animation-duration:2s;
    -moz-animation-name:pulse;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: cubic-bezier(0,0,0,1);
}
.pulse.dark>*{
    border-color: #fa565a;
}
.pulse:after{
    content: '';
    display: block;
    position:absolute;
    width: 16px;
    height: 16px;
    left: 8px;
    top: 2px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    background: #2B6882;
    vertical-align: middle;
}
.pulse.dark:after{
    background: #fa565a;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

It display OK in firefox, but in Chrome, the circle border, that should pulse, is heavily pixelated. That border is the empty span inside pulse span.

I'm looking at it for almost an hour and can't find what could be the problem.

Answer 1

Without the "text-indent: -9000px", it works slightly better.

Fiddle.

.pulse>*{
    position: relative;
    border:1px solid #fa565a;
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;

    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    border-radius:30px;

    -webkit-transition-property:top, bottom, left, right, opacity, border-width;
    -webkit-animation-duration:2s;
    -webkit-animation-name:pulse;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(0,0,0,1);

    -moz-transition-property:top, bottom, left, right, opacity, border-width;
    -moz-animation-duration:2s;
    -moz-animation-name:pulse;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: cubic-bezier(0,0,0,1);
}