Merge pull request #6512 from nextcloud-libraries/fix/NcPopover--blur…

…ry-on-scale

fix(NcPopover): blurry content on scaled page in Chromium

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);

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 {
@@ -442,7 +445,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;
@@ -463,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);
 		}