My website features diagrams consisting of 9x9 tiles arranged in columns and rows. The final result should look like this:
https://i.sstatic.net/694EH.png
In the image above, the tiles are closely packed and appear as a single unit. However, when users zoom in, black and white lines start to appear for some unknown reason.
In IE11, random black and white lines can be seen in various places.
https://i.sstatic.net/1eHIo.png
Even in Chrome, a grid-like pattern emerges.
https://i.sstatic.net/jG3gY.png
All images are loaded from a single png file with each cell being restricted to 31x31 pixels in width and height.
https://i.sstatic.net/8QVAT.png
The table is created using several <div> html elements.
<div class="my-table">
<div class="my-row">
<div class="my-cell my-cell-empty-center"/>
<!-- repeated 9 times -->
</div>
<!-- repeated 9 times -->
</div>
The CSS code removes borders and spacing between elements.
.my-table{
display:table;
width:auto;
border:0px;
border-spacing:0px;
padding: 0px;
border-collapse: collapse;
}
.my-row{
display:table-row;
width:auto;
height: auto;
clear:both;
}
.my-cell{
float:left;/*fix for buggy browsers*/
display:table-column;
width:31px;
height:31px;
background: url(sprites.png) no-repeat;
}
There is additional CSS to specify the correct section of the image for each cell, which may vary.
.my-cell-black{background-position: 0 -93px ;}
.my-cell-white{background-position: -62px -93px ;}
.my-cell-empty-center{background-position: -31px -31px ;}
.my-cell-empty-dot{background-position: -31px -93px ;}
.my-cell-empty-left{background-position: 0 -31px ;}
.my-cell-empty-top{background-position: -31px 0 ;}
.my-cell-empty-right{background-position: -62px -31px ;}
.my-cell-empty-down{background-position: -31px -62px ;}
Any thoughts on what might be causing these issues?