CSS Chrome 显示问题中的脉冲点

Question

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

HTML 标记很简单：

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

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

它在 Firefox 中显示正常，但在 Chrome 中，应该脉冲的圆圈边框被严重像素化。该边框是跨度内的空跨度pulse。

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

Answer 1

如果没有"text-indent： -9000px"，它的效果会稍微好一些。

小提琴。

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