This is because of subpixel rendering from the browser when using the transform property - it's actually a longstanding "issue" faced by front-end devs for years (albeit, working as intended). When working in subpixel ranges (1.875px, 10.5px, etc) with transforms, the browser calculates the draw differently than flex.
This method works ok for images and other media elements that will receive some sort of rendered anti-aliasing from the browser naturally, but when it comes to pixel perfect UI elements (borders, buttons, fonts etc) that anti-aliasing is performed on the entire element, again, when it shouldn't be. Some tricks like using the transform z-scaling, transform rotate with fractional degrees, and backface-visibility:hidden can sometimes mitigate the issue, but its pretty hit-or-miss and isn't always supported across all browsers.
TLDR; Use transformation centering for media elements and select structure layouts, it's great to have in your toolkit. Items containing UI elements are more safely centered vertically with flex.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
This is because of subpixel rendering from the browser when using the transform property - it's actually a longstanding "issue" faced by front-end devs for years (albeit, working as intended). When working in subpixel ranges (1.875px, 10.5px, etc) with transforms, the browser calculates the draw differently than flex.
This method works ok for images and other media elements that will receive some sort of rendered anti-aliasing from the browser naturally, but when it comes to pixel perfect UI elements (borders, buttons, fonts etc) that anti-aliasing is performed on the entire element, again, when it shouldn't be. Some tricks like using the transform z-scaling, transform rotate with fractional degrees, and backface-visibility:hidden can sometimes mitigate the issue, but its pretty hit-or-miss and isn't always supported across all browsers.
TLDR; Use transformation centering for media elements and select structure layouts, it's great to have in your toolkit. Items containing UI elements are more safely centered vertically with flex.