CODEWITHSUNDEEP
htmlcssimagegrid-layout
bvdb
bvdb

Reputation: 24740

white space between image tiles when zooming

My website contains diagrams. This diagram consists of 9x9 tiles arranged in columns and rows. When all goes well, the result look as follows:

what it should look like

In the above picture, the images are close together and appear as one. However, when the user zooms in, for some reason, black and white lines appear.

On IE11, there are black and white lines in random places.

black and white lines

In Chrome, there is even a kind of grid that appears.

thin white line

In fact, all images are loaded from a single png file. The width and height is limitted to 31x31 pixels for each cell.

source file

The table is constructed from a bunch of <div> html nodes.

<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 removes all kinds of borders and spacing.

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

And then there is some CSS to select the right area of the image. This part can be different for each cell.

.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 idea what goes wrong ?

Upvotes: 0

Views: 1423

Answers (2)

bvdb
bvdb

Reputation: 24740

Update: almost 5 years later.

Shortly after posting this question and reading the responses, I decided to replace everything with SVG.

  • SVG is a vector-based format, so it can resize flawlessly.
  • You can render SVG inline inside your HTML document. You don't need to import an image file anymore.
  • And with frameworks like Angular (Vue and React probably too) you can render SVG even dynamically.

So, instead of tiling together multiple images that represent a long line, I now just directly draw a line.

SVG drawing

Some further performance tips for those who have similar plans or projects:

  • Put a pointer-events="none" on those SVG nodes, which reduces processing time when you hover the mouse across them. Because sometimes I do need to capture click events, I do have a single click event which I'm listening to. I then just calculate which element was clicked. Working with a single click event listener just turns out to be faster than having 100 click event listeners.
  • For those who use Angular: put your component in an OnPush strategy to avoid needless re-renders.

Upvotes: 1

Johannes
Johannes

Reputation: 67776

When the user zooms in or out, values are calculated according to the percentage of the zoom. Since this very often will NOT result in integer values, the pixel values will be rounded, which can cause 1px lines as shown in your screenshots, since the sum of all rounded values doesn't equal the sum of the container of these elements. You can't really do much about it.

Upvotes: 1

Related Questions