rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: fix issue where popovers & modals are sometimes blurry on chrome

Browse Source
This commit is contained in:
Aman Harwara
2023-08-04 16:22:14 +05:30
parent 0642b589ff
commit fc500b08d2
5 changed files with 10 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts
View File

@@ -29,8 +29,8 @@ const getStylesFromRect = (
return {
willChange: 'transform',
'--translate-x': `${shouldApplyMobileWidth ? marginForMobile / 2 : rect.x}px`,
'--translate-y': `${rect.y}px`,
'--translate-x': `${shouldApplyMobileWidth ? marginForMobile / 2 : Math.floor(rect.x)}px`,
'--translate-y': `${Math.floor(rect.y)}px`,
'--offset': `${options.offset}px`,
transform: 'translate(var(--translate-x), var(--translate-y))',
visibility: 'visible',

4
packages/web/src/javascripts/Components/Popover/Utils/getAdjustedStylesForNonPortal.ts
View File

@@ -19,8 +19,8 @@ export const getAdjustedStylesForNonPortalPopover = (
const parentRect = absoluteParent.getBoundingClientRect()
const adjustedTranslateX = parsedTranslateX - parentRect.left
const adjustedTranslateY = parsedTranslateY - parentRect.top
const adjustedTranslateX = Math.floor(parsedTranslateX - parentRect.left)
const adjustedTranslateY = Math.floor(parsedTranslateY - parentRect.top)
return {
...styles,

8
packages/web/src/javascripts/Components/Popover/Utils/movePopoverToFitInsideRect.ts
View File

@@ -8,18 +8,18 @@ export const movePopoverToFitInsideRect = (popoverElement: HTMLElement, rect: DO
const overflows = getOverflows(popoverRect, rect)
if (overflows['top'] > 0) {
popoverElement.style.setProperty('--translate-y', `${y + overflows['top'] + offset}px`)
popoverElement.style.setProperty('--translate-y', `${Math.floor(y + overflows['top'] + offset)}px`)
}
if (overflows['bottom'] > 0) {
popoverElement.style.setProperty('--translate-y', `${y - overflows['bottom'] - offset}px`)
popoverElement.style.setProperty('--translate-y', `${Math.floor(y - overflows['bottom'] - offset)}px`)
}
if (overflows['left'] > 0) {
popoverElement.style.setProperty('--translate-x', `${x + overflows['left'] + offset}px`)
popoverElement.style.setProperty('--translate-x', `${Math.floor(x + overflows['left'] + offset)}px`)
}
if (overflows['right'] > 0) {
popoverElement.style.setProperty('--translate-x', `${x - overflows['right'] - offset}px`)
popoverElement.style.setProperty('--translate-x', `${Math.floor(x - overflows['right'] - offset)}px`)
}
}