CSS Image Tiling Border Bleedout in Chrome

Question

Trying to build a large image viewer by tiling a series of smaller absolutely positioned image tiles together. This renders find in most browsers, where each tiled image appears perfectly lined up to the surrounding ones. However, on some browsers, most notably when viewing this on a high DPI laptop like the Macbook Pro on Google Chrome, when zooming in the page in and out several factors, there appears to be a border bleed out on some tiles. Not sure why this happens. I'm not a CSS expert, but if anyone could point out what CSS rules I'm missing to make this look flawless on all browsers, it would be greatly appreciated.

JSFiddle Link: https://jsfiddle.net/w5kfseno/

Try viewing the link in Google Chrome when zoomed out of 67%. There should not be any blue lines at all.

In case the link doesn't work, below is the HTML and CSS

<div class="container">
<div class="tile img"         
    style="left: 0px; top: 0px; width: 256px; height: 256px;"></div>
<div class="tile img"         
    style="left: 256px; top: 0px; width: 256px; height: 256px;"></div>
<div class="tile img"        
    style="left: 512px; top: 0px; width: 256px; height: 256px;"></div>
<div class="tile img"         
    style="left: 0px; top: 256px; width: 256px; height: 256px;"></div>
<div class="tile img"         
    style="left: 256px; top: 256px; width: 256px; height: 256px;"></div>
<div class="tile img"         
    style="left: 512px; top: 256px; width: 256px; height: 256px;"></div>
<div class="tile img"         
    style="left: 0px; top: 512px; width: 256px; height: 256px;"></div>
<div class="tile img"         
    style="left: 256px; top: 512px; width: 256px; height: 256px;"></div>
<div class="tile img"         
    style="left: 512px; top: 512px; width: 256px; height: 256px;"></div>

.container{
width: 768px; height:768px;position:relative;
}

.img{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAIAAADTED8xAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAAJ7SURBVHhe7ccxDQAwEAOx50+63UPhLHnxvYOuPaTsIWUPKXtI2UPKHlL2kLKHlD2k7CFlDyl7SNlDyh5S9pCyh5Q9pOwhZQ8pe0jZQ8oeUvaQsoeUPaTsIWUPKXtI2UPKHlL2kLKHlD2k7CFlDyl7SNlDyh5S9pCyh5Q9pOwhZQ8pe0jZQ8oeUvaQsoeUPaTsIWUPKXtI2UPKHlL2kLKHlD2k7CFlDyl7SNlDyh5S9pCyh5Q9pOwhZQ8pe0jZQ8oeUvaQsoeUPaTsIWUPKXtI2UPKHlL2kLKHlD2k7CFlDyl7SNlDyh5S9pCyh5Q9pOwhZQ8pe0jZQ8oeUvaQsoeUPaTsIWUPKXtI2UPKHlL2kLKHlD2k7CFlDyl7SNlDyh5S9pCyh5Q9pOwhZQ8pe0jZQ8oeUvaQsoeUPaTsIWUPKXtI2UPKHlL2kLKHlD2k7CFlDyl7SNlDyh5S9pCyh5Q9pOwhZQ8pe0jZQ8oeUvaQsoeUPaTsIWUPKXtI2UPKHlL2kLKHlD2k7CFlDyl7SNlDyh5S9pCyh5Q9pOwhZQ8pe0jZQ8oeUvaQsoeUPaTsIWUPKXtI2UPKHlL2kLKHlD2k7CFlDyl7SNlDyh5S9pCyh5Q9pOwhZQ8pe0jZQ8oeUvaQsoeUPaTsIWUPKXtI2UPKHlL2kLKHlD2k7CFlDyl7SNlDyh5S9pCyh5Q9pOwhZQ8pe0jZQ8oeUvaQsoeUPaTsIWUPKXtI2UPKHlL2kLKHlD2k7CFlDyl7SNlDyh5S9pCyh5Q9pOwhZQ8pe0jZQ8oeUvaQsoeUPaTsIWUPKXtI2UPKHlL2kLKHlD2k7CFlDyl7SNlDyh5S9hBy9wFZTA7yASofcgAAAABJRU5ErkJggg==');
}

.container .tile{
background-color:#33F;
display: inline-block;
margin: 0;
vertical-align: top;
position: absolute;
background-repeat: no-repeat;
pointer-events: none!important;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-drag: none;
border: none;   
border-style:none;
border-collapse:collapse;
}

Answer 1

I don't fully understand what your asking, but - I would approach your goal (cleaner) like below: ;)

Simple JSfiddle Demo. <--

---

#container {
width: 515px;
height: 75px;
overflow: hidden;
border: 3px double #000;
white-space: nowrap;
}

#container img {display: inline-block;}

img { max-width: 100px; }

<div id="container">
    <img src="http://cdn.sheknows.com/articles/2013/04/Puppy_2.jpg">
    <img src="http://cdn.sheknows.com/articles/2013/04/Puppy_2.jpg">
    <img src="http://cdn.sheknows.com/articles/2013/04/Puppy_2.jpg">
    <img src="http://cdn.sheknows.com/articles/2013/04/Puppy_2.jpg">
    <img src="http://cdn.sheknows.com/articles/2013/04/Puppy_2.jpg">
    <img src="http://cdn.sheknows.com/articles/2013/04/Puppy_2.jpg">
    <img src="http://cdn.sheknows.com/articles/2013/04/Puppy_2.jpg">
</div>