Leerzeichen zwischen Bildkacheln beim Zoomen

Question

Meine Website enthält Diagramme. Dieses Diagramm besteht aus 9x9 Kacheln, die in Spalten und Reihen angeordnet sind. Wenn alles gut geht, wie das Ergebnis aussehen folgt:

In dem obigen Bild sind die Bilder nahe beieinander und erscheinen als ein. Wenn der Benutzer jedoch aus irgendeinem Grund zoomt, erscheinen schwarze und weiße Linien.

Auf IE11 gibt es schwarze und weiße Linien an zufälligen Orten.

In Chrome gibt es sogar eine Art Gitter, das erscheint.

In der Tat sind alle Bilder von einer einzelnen png-Datei geladen. Die Breite und Höhe ist für jede Zelle auf 31x31 Pixel begrenzt.

Die Tabelle ist von einem Bündel von <div> HTML-Knoten aufgebaut ist.

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

Das CSS entfernt alle Arten von Rändern und Abständen.

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

Und dann gibt es einige CSS, um den richtigen Bereich des Bildes auszuwählen. Dieser Teil kann für jede Zelle unterschiedlich sein.

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

Jede Idee, was schief geht?

Answer 1

Wenn der Benutzer vergrößert oder verkleinert wird, werden die Werte entsprechend dem Prozentsatz des Zooms berechnet. Da dies sehr oft keine ganzzahligen Werte ergibt, werden die Pixelwerte gerundet, was zu 1px Zeilen führen kann, wie in Ihren Screenshots gezeigt, da die Summe aller gerundeten Werte nicht der Summe des Containers dieser Elemente entspricht. Du kannst nicht viel dagegen tun.