`object-view-box` for tracking icons

[jsnkuhn]

Look into using CSS object-view-box for tracking Icons in replace of CSS background images on transparent SVGs in img tag.

This CSS property is in only chrome (104+) for now. OBS currently uses chrome 103 needs at least one more update (if not 2) before we can use reliably:

https://caniuse.com/?search=object%20view%20box

Codepen with experimenting:

https://codepen.io/jsnkuhn/pen/oNdKymy

img{
  object-view-box: xywh(40% 40% 32px 32px);
}

instead of this:

.sprite {
    background-image: url(images/item/item-sprite.png);
    background-repeat: no-repeat;
}

.sprite-bridge-transparent {
    background-position: 0 0;
}

[jsnkuhn]

Looked at object-position again for this.

Much better browser support now (https://caniuse.com/?search=object%20postion) for this than when we originally set up the system but still lacks the sizing control equivalent that background-size has. The closest thing is object-fit but this doesn't give you fine grained control of % sizes just some keywords that don't cover our use case (https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).

object-view-box is better designed to cover the responsive spiriting we want here. So we sit and we wait...

Might propose object-view-box for Interop2024.