CSS translate is affecting element size on chrome

Question

I have the following code that is responsible for displaying round elements:

.marker {
     position: relative;
     top: 10px;
     left: 10px;
     height: 13px;
     width: 13px;
     border: 2px solid #e02525;
     border-radius: 100%;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
    }
    .transform {
     -ms-transform: translate(-50%, -50%);
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     left: 50px;
     top: 4px;
    }

    <div class="marker"></div>
    <div class="marker transform"></div>

Each marker has fixed size of 13x13px, I'm also using box-sizing: border-box; to make sure that the border is included in the element size. Now the second marker is using tranform translate, on Chrome it affects the size by adding 1px to the height and width. Screenshot:

Do you have any idea how I can force correct element size on Chrome ?

UPDATE

I did some additional testing and it seems that this problem occurs only when the element size is using odd number, when you use even number, then the size is the same after translate().