From d026342a577e48009baf7fc6b2bfc7ba15705dea Mon Sep 17 00:00:00 2001 From: Wyatt Childers Date: Fri, 30 Aug 2024 17:40:19 -0400 Subject: [PATCH 1/2] Fix blurry right click menus --- .../Popover/GetPositionedPopoverStyles.ts | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts b/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts index 51c33b8ebb2..04892f11f20 100644 --- a/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts +++ b/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts @@ -78,12 +78,24 @@ const getStylesFromRect = (options: { const shouldApplyMobileWidth = isMobileScreen() && disableMobileFullscreenTakeover && !disableApplyingMobileWidth const marginForMobile = percentOf(10, window.innerWidth) + let xTranslation = shouldApplyMobileWidth ? marginForMobile / 2 : Math.floor(rect.x) + let yTranslation = Math.floor(rect.y) + + // There is a bug in Chrome that results in blurry results from translate calls: + // + // https://stackoverflow.com/questions/32034574/font-looks-blurry-after-translate-in-chrome + // + // To work around this issue and ensure the right click menu is always pixel perfect, + // ensure even numbers are used. + xTranslation = Math.floor(xTranslation / 2) * 2 + yTranslation = Math.floor(yTranslation / 2) * 2 + return { willChange: 'transform', - '--translate-x': `${shouldApplyMobileWidth ? marginForMobile / 2 : Math.floor(rect.x)}px`, - '--translate-y': `${Math.floor(rect.y)}px`, + '--translate-x': `${xTranslation}px`, + '--translate-y': `${yTranslation}px`, '--offset': `${options.offset}px`, - transform: 'translate3d(var(--translate-x), var(--translate-y), 0)', + transform: 'translate(var(--translate-x), var(--translate-y))', '--transform-origin': getTransformOrigin(options.side, options.align), visibility: 'visible', ...(canApplyMaxHeight && { From cf635b65699ee3aefb81f53118406b7a987c0c8d Mon Sep 17 00:00:00 2001 From: Wyatt Childers Date: Fri, 30 Aug 2024 17:54:51 -0400 Subject: [PATCH 2/2] Restore previous translate3d call After doing some reading, the original call is likely better for rendering performance and that's why it was used. --- .../Components/Popover/GetPositionedPopoverStyles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts b/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts index 04892f11f20..623df53b958 100644 --- a/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts +++ b/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts @@ -95,7 +95,7 @@ const getStylesFromRect = (options: { '--translate-x': `${xTranslation}px`, '--translate-y': `${yTranslation}px`, '--offset': `${options.offset}px`, - transform: 'translate(var(--translate-x), var(--translate-y))', + transform: 'translate3d(var(--translate-x), var(--translate-y), 0)', '--transform-origin': getTransformOrigin(options.side, options.align), visibility: 'visible', ...(canApplyMaxHeight && {