css sprite positioning

The four boxes should look identical: the top row's background are a png, the bottom row an svg (but they are the same image) The background size is always 126 * the div width. On the left it is calculated as a percentage, on the right a calculated pixels value. In chrome the right boxes are off by a pixel or so. In Firefox the svg are drawn incorrectly. In Safari, the right boxes are off by a considerable margin (and different in the svg and png cases).

by shadowphiar

HTML

<div class="spr sprpng spr1"/>
<div class="spr sprpng spr2"/>

<div class="spr sprsvg spr1"/>
<div class="spr sprsvg spr2"/>


<div class="card"/>

CSS

body {
  --wd: 32.15234234;

  background-color: black;
}

.spr {
  display: block;
  position: fixed;
  padding: none;
  margin: none;

  width: calc(var(--wd)*1px);
  height: calc(var(--wd)*1px);

  background-position: -12400% 0%;
}



.spr1 {
  left: 10.3px;
  background-size: 12600% 100%;

}

.spr2 {
  left: 50.3px;
  background-size: calc(var(--wd)*126px) calc(var(--wd)*1px);
}

.sprpng {
  top: 10px;
  background-image: url('https://i.imgur.com/uL6rqPz.png');
}

.sprsvg {
top: 50px;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='100%25' height='100%25' viewBox='0 0 2016 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg transform='matrix(0.991288,0,0,1,-32,0)'%3E%3Crect x='0' y='0' width='2066' height='16' style='fill:url(%23_Linear1);'/%3E%3C/g%3E%3Cg transform='matrix(0.0517909,0,0,1,1909,0)'%3E%3Crect x='0' y='0' width='2066' height='16' style='fill:url(%23_Linear2);'/%3E%3C/g%3E%3Cg transform='matrix(0.941176,0,0,1,131.765,0)'%3E%3Cpath d='M1985,0L1968,0L1968,16L1985,16L1985,0ZM1983.94,1L1983.94,15C1983.94,15 1969.06,15 1969.06,15C1969.06,15 1969.06,1 1969.06,1L1983.94,1Z' style='fill:white;'/%3E%3C/g%3E%3Cg transform='matrix(0.941176,0,0,1,-1852.24,0)'%3E%3Cpath d='M1985,0L1968,0L1968,16L1985,16L1985,0ZM1983.94,1L1983.94,15C1983.94,15 1969.06,15 1969.06,15C1969.06,15 1969.06,1 1969.06,1L1983.94,1Z' style='fill:white;'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='_Linear1' x1='0' y1='0' x2='1' y2='0' gradientUnits='userSpaceOnUse' gradientTransform='matrix(2066,0,0,16,0,8)'%3E%3Cstop offset='0' style='stop-color:rgb(58,152,0);stop-opacity:1'/%3E%3Cstop offset='1'...