Why does checkbox size look different in Chrome but same in Edge?

I have created a table with striped rows in bootstrap 4. One of the table columns have html check-boxes.

Check the jsfiddle

If you open it on Google Chrome, the Default check-boxes in rows with darker background colour look smaller in size compared to the one in white background colour whereas if you open it on Microsoft Edge or Opera Mini, they look the same size. Is there a difference or just my illusion? Is this a bug on Edge or Chrome or is there a way to have a congruent behavior across all browsers?

The above behaviour is not observed when all rows have the same background colour.

Also, a way around could be to use create a custom checkbox as shown in the same fiddle.

All I have is

<some code>
<tr class="bg-primary">
<td>
      <input type="checkbox" class="size" id="Check1">
</td>
</tr>
<tr>
<td>
      <input type="checkbox" class="size" id="Check2">
</td>
</tr>
<some code>