Weird table pixel bug in Chrome - html

Question

I am encountering strange pixel discrepancy in Google Chrome (not Firefox). See above image or run the code snippet below.
In red border can be seen the table. Orange: div in td. Grey: td. I expect both to have the same height. Why dont they? The left one is half a pixel bigger. If you zoom it with Chrome, the difference resolves. Is this some kind of bug in Chrome? Do I have to use px as a measurement instead? I do not want to, since I am rendering a to-be-printed page here.
I tried hard to remove any unnecessary parts.
* {
margin:0;
padding:0;
}
#wrapper1 {
padding-top: 5mm;
background:lightblue;
}
#wrapper2 {
display: flex;
flex-direction: column;
background:lightgrey;
}
table {
border-collapse: collapse;
border: 1px solid red;
margin-top:7mm;
}
td, .box {
width:12mm;
height:12mm;
}
td {
background:grey;
}
.box {
background:orange;
}
<div id="wrapper1">
<div id="wrapper2">
<table>
<tr>
<td>
<div class="box"></div>
</td>
<td></td>
</tr>
</table>
</div>
</div>

Answer 1

mm units do not convert into a whole number of pixels. For example, 12mm is 45.354330709px. Unfortunately, browsers handle rounding differently since no CSS spec is provided for how it should be done.
As an example, I have converted your mm units to use px. I scaled it up/down by a factor of 10 and no longer see a difference in where the borders are placed.
* {
margin:0;
padding:0;
}
#wrapper1 {
padding-top: 5mm;
background:lightblue;
}
#wrapper2 {
display: flex;
flex-direction: column;
background:lightgrey;
}
table {
border-collapse: collapse;
border: 1px solid red;
margin-top:70px;
}
td, .box {
width:120px;
height:120px;
}
td {
background:grey;
}
.box {
background:orange;
}
<div id="wrapper1">
<div id="wrapper2">
<table>
<tr>
<td>
<div class="box"></div>
</td>
<td></td>
</tr>
</table>
</div>
</div>