Table Borders During Trasnform Chrome Issue

by tabalinas

HTML

<div id="scroller">
    <div class="content">
        <table>
           <tr>
               <td>
                   fdsfdsfsdfsdf 1
               </td>
               <td>
                   fdsfdsfsdfsdf 2
               </td>
               <td>
                   fdsfdsfsdfsdf 3
               </td>
               <td>
                   fdsfdsfsdfsdf 4
               </td>
               <td>
                   fdsfdsfsdfsdf 5
               </td>
           </tr>
           <tr>
               <td>
                   fdsfdsfsdfsdf 1
               </td>
               <td>
                   fdsfdsfsdfsdf 2
               </td>
               <td>
                   fdsfdsfsdfsdf 3
               </td>
               <td>
                   fdsfdsfsdfsdf 4
               </td>
               <td>
                   fdsfdsfsdfsdf 5
               </td>
           </tr>
           <tr>
               <td>
                   fdsfdsfsdfsdf 1
               </td>
               <td>
                   fdsfdsfsdfsdf 2
               </td>
               <td>
                   fdsfdsfsdfsdf 3
               </td>
               <td>
                   fdsfdsfsdfsdf 4
               </td>
               <td>
                   fdsfdsfsdfsdf 5
               </td>
           </tr>
           <tr>
               <td>
                   fdsfdsfsdfsdf 1
               </td>
               <td>
                   fdsfdsfsdfsdf 2
               </td>
               <td>
                   fdsfdsfsdfsdf 3
               </td>
               <td>
                   fdsfdsfsdfsdf 4
               </td>
               <td>
                   fdsfdsfsdfsdf 5
               </td>
           </tr>
           <tr>
               <td>
                   fdsfdsfsdfsdf 1
               </td>
               <td>
                   fdsfdsfsdfsdf 2
               </td>
               <td>
                   fdsfdsfsdfsdf 3
               </td>
               <td>
                  ...

CSS

#scroller {
    position: relative;
    overflow: hidden;
    height: 200px;    
    -webkit-user-select: none;
    border: 1px solid lightgray;
}

.scrollbar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: red;
    width: 5px;
    transition: width linear .5s
}

.scrollbar:hover {
    width: 20px;
}

.content table {
    width: 100%;
    border-collapse: collapse;
}

.content tr {
    background: #b47fff;
}

.content td {
    padding: 7px;
}

JavaScript

var scrollbar = document.querySelector(".scrollbar");
var content = document.querySelector(".content");

var started = false;
var startedPos = 0;

scrollbar.addEventListener("mousedown", function(e) {
    started = true;
    startedPos = e.pageY;
});

document.addEventListener("mousemove", function(e) {
    if(!started)
        return;
    var distance = e.pageY - startedPos;
    content.style.webkitTransform = "translate3d(0, " + distance + "px, 0)";
});

document.addEventListener("mouseup", function(e) {
    started = false;
});