79168407

Date: 2024-11-07 23:49:22
Score: 1
Natty:
Report link

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>
    )
}
Reasons:
  • Blacklisted phrase (1.5): any luck
  • Long answer (-0.5):
  • Has code block (-0.5):
  • Low reputation (0.5):
Posted by: Eigil