CSS Sprite - thin white lines at edge-CodePudding

I've created a toolbar using 14px x 14px images stored in a sprite. When displayed, the image has a very clear thin white edge on the top and right sides (you may have to zoom in to see it - it's no more than 1px). For the life of me, I don't have any idea how to get rid of it. I've tried moving the offset 1px in any direction - which clearly shows it's positioned correctly. Changing margin and padding don't fix it. Any ideas how to get rid of the white lines and what is causing it to render this way?

button.video-sprite-popout {
        background: url("https://www.mseifert.com/img-common/video-controls-sprite.png") no-repeat -56px -14px scroll;
        border: 0 !important;
        height: 14px;
        margin-left: 8px;
        margin-right: 8px;
        width: 14px;
    }

    .video-controls {
        background-color: black;
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
    }

<div class='video-controls'>
  <div><button class='video-sprite-popout'></div>
<div>

CodePudding user response：

It is likely due to antialiasing, and it is very device/browser specific. The lines you are seeing are subpixels. Though I am not able to see this specific problem on my device, you can use either of these on your background image container. See which one fits better.

button.video-sprite-popout {
    image-rendering: crisp-edges;
}

button.video-sprite-popout {
    image-rendering: pixelated;
}