3

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スパンです。

私はそれをほぼ1時間見ていますが、何が問題なのかわかりません。

4

1 に答える 1