Round transform pixel values to avoid blurry text (#124)

This commit is contained in:
Evan Simkowitz 2024-07-18 18:46:04 -07:00 committed by GitHub
parent fd3581fc42
commit 98111f7383
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -83,7 +83,11 @@ export function determineDropDirection(dimensions?: Dimensions, offset?: XYCoord
export function setTransform({ top, left, width, height }: Dimensions, setSize: boolean = true): CSSProperties {
// Replace unitless items with px
const translate = `translate3d(${left}px,${top}px, 0)`;
const topRounded = Math.round(top);
const leftRounded = Math.round(left);
const widthRounded = Math.round(width);
const heightRounded = Math.round(height);
const translate = `translate3d(${leftRounded}px,${topRounded}px, 0)`;
return {
top: 0,
left: 0,
@ -92,8 +96,8 @@ export function setTransform({ top, left, width, height }: Dimensions, setSize:
MozTransform: translate,
msTransform: translate,
OTransform: translate,
width: setSize ? `${width}px` : undefined,
height: setSize ? `${height}px` : undefined,
width: setSize ? `${widthRounded}px` : undefined,
height: setSize ? `${heightRounded}px` : undefined,
position: "absolute",
};
}