[19:01:56] <Krinkle>	 RoanKattouw: TIL about inset-inline-* and inset-block-*. I only recently learned about `inset` as shorthand for top/left/bottom/right.
[19:02:04] <Krinkle>	 Good to know those are covered nowadays.
[19:03:07] <Krinkle>	 I can't think of a situation where I use translate transforms with small offsets like that. Maybe that could be approximated with background position or (negative) margin.
[19:03:42] <Krinkle>	 https://codesearch.wmcloud.org/search/?q=translateX&files=&excludeFiles=&repos=codex
[19:14:51] <Krinkle>	 ok, found an example in the demos at https://doc.wikimedia.org/codex/latest/components/demos/text-input.html#with-icons for the magnifying glass icon on the left.
[19:15:07] <Krinkle>	 ah, it's an inline SVG already in the DOM.
[19:18:16] <Krinkle>	 RoanKattouw: If I disable `transform: translateY(-50%);` and change `top: 50%; height: 1.25em;` to  `top: calc(50% - 1.25em/2); height: 1.25em;` it seems to render in the same place. 
[19:18:44] <Krinkle>	 This works because the element already depends on position:relative since it uses left and top already. if that hadn't been the case it'd be harder or impossible indeed.
[19:19:16] <Krinkle>	 the calc trick is also how I did it at https://api.qunitjs.com/ as part of https://github.com/jquery/typesense-minibar