从Javascript移动div时闪烁的行；像素完美CSS？

请看一下这个JSFIDLE：

我用CSS/Html/Javascript创建了一个指南针，可以对页面上的鼠标水平移动做出反应。 如果您缓慢移动鼠标，您将看到线条的宽度略有变化，从而导致指南针的外观闪烁。 我认为当一条线与屏幕上相应的像素不完全匹配时，就会出现这种效果，因此只能显示线的一半宽度。 在一些GUI框架中，我们可以选择将GUI显示为像素完美。在CSS中是否可能出现类似的情况

HTML

<div id="compass-container">
    <div class="arrow down"></div>
    <div class="arrow up"></div>
    <div id="viewport">
        <div id="compass-scale">
        </div>            
    </div>
</div>

---

推有人知道吗？可能是复制品

div#compass-container {

        position:relative;
        height: 6em;

    }

    div#viewport{

        position:relative;
        height:40%;
        width:50%;
        left:50%;
        top:1.2em;
        margin-left:-25%;
        overflow: hidden;

    }

    div#compass-scale {

        position:relative;
        width: auto;
        height: 100%;

    }

    .mini-container {

        width:1em;
        height:95%;
        top:0em;
        border: 0px solid black;
        float:left;
    }

    .line {

        position: relative;
        left:45%;
        width:.1em;
        background-color:black;

    }

    .line.small {

        height: 15%;

    }

    .line.medium {

        height: 30%;

    }

    .line.big {

        height: 45%;

    }

    .compass-text {

        position:relative;
        height:100%;
        width:100%;
        margin-top:.4em;
        text-align: center;
        font-family: sans-serif;
        color:dodgerblue;

    }

    .compass-text.small {

       font-size: .6em;


    }

    .compass-text.big {

        font-size: .8em;

    }

    .arrow {

        position:absolute;
        width: 0;
        height: 0;  
        left:50%;

    }

    .arrow.up {

        margin-left:-1em;
        border-left: 1em solid transparent;
        border-right: 1em solid transparent;
        border-bottom: 2em solid dodgerblue;
        bottom: 0em;

    }

    .arrow.down {

        margin-left:-0.5em;
        border-left: 0.5em solid transparent;
        border-right: 0.5em solid transparent;
        border-top: 1em solid dodgerblue;
        top: 0em;

    }