I tried all the css suggestions without any luck. After some experimentation I found that if you replace the html element directly under the element being scaled with itself everything is crisp. Here is a react hook example:
const useChromeScaleHack = (ref: MutableRefObject<HTMLElement>, scale: number) => {
if (!window.chrome) return
useEffect(() => {
if (scale > 1.09 && ref.current) {
const el = ref.current
el.replaceWith(el)
}
}, [scale])
}
const Comp = ({ scale, children }) => {
const ref = useRef(null)
useChromeScaleHack(ref, scale)
return (
<div
style={{
willChange: "transform",
transform: `scale(${scale})`,
}}
>
<div ref={ref}>{children}</div>
</div>
)
}