ズーム時の画像タイル間の空白

Question

私のウェブサイトには図があります。この図は、列と行に並べられた9×9のタイルで構成されています。すべてがうまくなると、その結果を見ては、次のとおりです。上の写真で

は、画像が接近していると1として表示されます。 ただし、ユーザーが何らかの理由でズームすると、白黒の線が表示されます。

IE11では、ランダムな場所に白黒の線があります。 Chromeの場合

、表示されたグリッドのさえ種類があります。

は実際には、すべての画像は、単一のPNGファイルからロードされます。 各セルの幅と高さは31x31ピクセルに制限されています。

テーブルは<div> HTMLノードの束から構成されています。

<div class="my-table"> 
    <div class="my-row"> 
    <div class="my-cell my-cell-empty-center"/> 
    <!-- repeated 9 times --> 
    </div> 
    <!-- repeated 9 times --> 
</div> 

CSSはすべての種類の枠線と間隔を削除します。

.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; 
} 

そして、画像の右側の領域を選択するCSSがあります。 この部分はセルごとに異なる場合があります。

.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 ;} 

何が問題になりますか？

Answer 1

ユーザーがズームインまたはズームアウトすると、ズームのパーセンテージに従って値が計算されます。これは非常に頻繁に整数値にならないため、ピクセル値は丸められ、丸められたすべての値の合計がこれらの要素のコンテナの合計と等しくないため、スクリーンショットに示されているように1ピクセルの行が発生する可能性があります。あなたは本当にそれについて多くをすることはできません。