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

[ShGKme]

☑️ Resolves

• Fix: [NcPopover] blurry rendering with fractional scaling #6040

1. floating-vue uses translate3d (with translateZ) to trigger GPU acceleration
   • The same does perspective with rotation, for example
   • It also triggers a new composition layer
   • It also changes how Chromium calculates coordinates
2. Then we apply filter: drop-shadow
3. filter: drop-shadow requires previous layers of content on rendering
   • The same does anything using GPU acceleration with content behind, like backdrop-filter or mix-blend-mode
4. Somehow it makes Chromium first render and rasterize the popover before scaling
   • So Chromium scales raster image on render instead of scaling fonts/sizes and then render
   • Or it uses the wrong rasterization method on fraction scaling
   • Anyway, it results in blurry images

Replacing filter: drop-shadow with a simple box-shadow fixes the issue.

• Note: there still is a blur on highDPI screens with scaling
• It requires a fix in upstream: translate3d render a blurred PopperContent view under odd dpr screen, like 125% Akryum/floating-vue#932

🖼️ Screenshots

🏚️ Before	🏡 After

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable
• 3️⃣ Backport to next requested with a Vue 3 upgrade

[susnux]

Typical Blink engine issue, their hardware acceleration is good - sometimes - and really really bad in most cases. Gecko is buggy but at least consistent as they wrote the renderer themself.

[szaimen]

LGTM from the screenshots

[ShGKme]

/backport to next