Thanks to visit codestin.com
Credit goes to github.com

Skip to content

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

Merged
ShGKme merged 2 commits intomasterfrom
fix/NcPopover--blurry-on-scale
Feb 13, 2025
Merged

fix(NcPopover): blurry content on scaled page in Chromium#6512
ShGKme merged 2 commits intomasterfrom
fix/NcPopover--blurry-on-scale

Conversation

@ShGKme
Copy link
Contributor

@ShGKme ShGKme commented Feb 12, 2025

☑️ Resolves

  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.

🖼️ Screenshots

🏚️ Before 🏡 After
image image
image image
image image

🏁 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

@ShGKme ShGKme added bug Something isn't working 3. to review Waiting for reviews feature: popover Related to the popovermenu component browser: Chrome/Chromium labels Feb 12, 2025
@ShGKme ShGKme added this to the 8.23.0 milestone Feb 12, 2025
@ShGKme ShGKme self-assigned this Feb 12, 2025
.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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor

@szaimen szaimen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM from the screenshots

@ShGKme ShGKme merged commit 6c15905 into master Feb 13, 2025
23 checks passed
@ShGKme ShGKme deleted the fix/NcPopover--blurry-on-scale branch February 13, 2025 11:02
@ShGKme
Copy link
Contributor Author

ShGKme commented Feb 13, 2025

/backport to next

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

3. to review Waiting for reviews browser: Chrome/Chromium bug Something isn't working feature: popover Related to the popovermenu component

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[NcPopover] blurry rendering with fractional scaling

3 participants