From 2d3f794b28c392026436f0c3707e4614f1fec193 Mon Sep 17 00:00:00 2001 From: "Grigorii K. Shartsev" Date: Wed, 12 Feb 2025 21:20:02 +0100 Subject: [PATCH 1/2] fix(NcPopover): blurry on scaled page Signed-off-by: Grigorii K. Shartsev --- src/components/NcActions/NcActions.vue | 1 - src/components/NcPopover/NcPopover.vue | 13 ++++++++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/components/NcActions/NcActions.vue b/src/components/NcActions/NcActions.vue index 6cb27f4e31..2f84f06086 100644 --- a/src/components/NcActions/NcActions.vue +++ b/src/components/NcActions/NcActions.vue @@ -2093,7 +2093,6 @@ export default { // the popover__inner for actions only. .v-popper--theme-dropdown.v-popper__popper.action-item__popper .v-popper__wrapper { border-radius: var(--border-radius-large); - overflow: hidden; .v-popper__inner { border-radius: var(--border-radius-large); diff --git a/src/components/NcPopover/NcPopover.vue b/src/components/NcPopover/NcPopover.vue index 442aaffa6e..5526fe788b 100644 --- a/src/components/NcPopover/NcPopover.vue +++ b/src/components/NcPopover/NcPopover.vue @@ -442,7 +442,18 @@ $arrow-width: 10px; left: 0; display: block !important; - filter: drop-shadow(0 1px 10px var(--color-box-shadow)); + .v-popper__wrapper { + /* + * In theory, "filter: drop-shadow" would look better here with arrow shadow. + * In fact, in results in a blurry popover in Chromium on scaling. + * The hypothesis is that "filter" creates a new composition layer, + * and with GPU acceleration requires the previous layers content to be rasterized. + * In combination with translate3d from floating-vue, it makes Chromium to first render and rasterize the popover + * and then apply scaling, which results in a blurry popover. + */ + box-shadow: 0 1px 10px var(--color-box-shadow); + border-radius: var(--border-radius-large); + } .v-popper__inner { padding: 0; From a38575ce82315675d11f87596361869d8c28370c Mon Sep 17 00:00:00 2001 From: "Grigorii K. Shartsev" Date: Wed, 12 Feb 2025 20:17:28 +0100 Subject: [PATCH 2/2] fix(NcPopover): remove a gap in arrow on scaling Signed-off-by: Grigorii K. Shartsev --- src/components/NcPopover/NcPopover.vue | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/NcPopover/NcPopover.vue b/src/components/NcPopover/NcPopover.vue index 5526fe788b..b399b992f9 100644 --- a/src/components/NcPopover/NcPopover.vue +++ b/src/components/NcPopover/NcPopover.vue @@ -434,6 +434,9 @@ export default { } $arrow-width: 10px; +// Move the arrow just slightly inside the popover +// To prevent a visual gap on page scaling +$arrow-position: $arrow-width - 1px; .v-popper--theme-dropdown { &.v-popper__popper { @@ -474,25 +477,25 @@ $arrow-width: 10px; } &[data-popper-placement^='top'] .v-popper__arrow-container { - bottom: -$arrow-width; + bottom: -$arrow-position; border-bottom-width: 0; border-top-color: var(--color-main-background); } &[data-popper-placement^='bottom'] .v-popper__arrow-container { - top: -$arrow-width; + top: -$arrow-position; border-top-width: 0; border-bottom-color: var(--color-main-background); } &[data-popper-placement^='right'] .v-popper__arrow-container { - left: -$arrow-width; + left: -$arrow-position; border-left-width: 0; border-right-color: var(--color-main-background); } &[data-popper-placement^='left'] .v-popper__arrow-container { - right: -$arrow-width; + right: -$arrow-position; border-right-width: 0; border-left-color: var(--color-main-background); }