CSS Chrome显示中的脉冲点问题

我正在尝试用CSS创建一个脉冲点效果

HTML标记很简单：

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

它在firefox中显示正常，但在Chrome中，圆圈边框（应该是脉冲）被严重像素化。该边框是

pulse

span内的空白span

我看了将近一个小时，找不到问题所在。

如果没有“文本缩进：-9000px”，效果会稍微好一点

---

为什么不将所有代码放在www.jsfiddle.net上呢？最好更改大小属性（宽度和高度），而不是使用

比例。因为
scale
只会拉伸图像，不会计算/生成新像素，而随着大小调整会生成新像素。不太完美，但这是我的想法是的，它看起来好一点。但为什么它在Firefox中工作正常，而在Chrome上却有问题呢？它是否可能继承了一些CSS位，这会弄乱脉冲部分？关于继承的属性，我应该寻找什么？
@-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;
}

.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);
}