fix: Prevent nearby elements from bleeding through Acrylic #22180
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add canvas clip and bounds constraint in CompositionEffectBrush.Paint() to limit the backdrop filter's output area. This prevents nearby sibling elements from visually bleeding through the acrylic effect. Also added a runtime test to verify that dark elements next to an acrylic element don't bleed through. Fixes https://github.com/unoplatform/uno/issues/21095 Co-authored-by: MartinZikmund <[email protected]>
|
|
jeromelaban
reviewed
Dec 18, 2025
Comment on lines
1597
to
1600
| canvas.Save(); | ||
| canvas.ClipRect(bounds); | ||
| canvas.SaveLayer(new SKCanvasSaveLayerRec { Backdrop = _filter, Bounds = bounds }); | ||
| canvas.Restore(); |
Member
There was a problem hiding this comment.
Let's validate if there are no perf regressions associated to this.
Co-authored-by: MartinZikmund <[email protected]>
Copilot
AI
changed the title
[WIP] Fix nearby elements bleed through Acrylic
fix: Prevent nearby elements from bleeding through Acrylic
Dec 18, 2025
Contributor
|
🤖 Your WebAssembly Skia Sample App stage site is ready! Visit it here: https://unowasmprstaging.z20.web.core.windows.net/pr-22180/wasm-skia-net9/index.html |
Contributor
|
The build 189026 found UI Test snapshots differences: Details
|
Member
|
@copilot this still doesn't work, the blur should always blur just what is directly behind the element and ignore the rest. Here is what happens with a scroll bar for example, even after these changes: |
The previous approach of clipping the canvas before SaveLayer didn't actually prevent the blur from sampling outside the bounds. The real fix is to implement support for the BorderMode property in GenerateGaussianBlurEffect. When BorderMode is Hard (which AcrylicBrush sets), the blur filter should not expand its sampling area beyond the element bounds. This prevents nearby sibling elements from being sampled and bleeding through the acrylic effect. Fixes https://github.com/unoplatform/uno/issues/21095 Co-authored-by: MartinZikmund <[email protected]>
Contributor
Author
You're right, the previous clipping approach didn't work because it only affected where the result was drawn, not what the blur sampled from. I've implemented a proper fix in |
Improve code clarity by using EffectBorderMode.Hard enum cast instead of magic number 1 when checking the border mode property. Co-authored-by: MartinZikmund <[email protected]>
Contributor
|
The build 189028 found UI Test snapshots differences: Details
|
Member
|
@copilot it still has the same behavior |
Added Bounds property to SKCanvasSaveLayerRec to constrain where the backdrop filter operates, in addition to the BorderMode.Hard fix that prevents blur padding expansion. This should further help prevent nearby sibling elements from bleeding through the acrylic effect. Co-authored-by: MartinZikmund <[email protected]>
Contributor
Author
I've added another fix in canvas.SaveLayer(new SKCanvasSaveLayerRec { Backdrop = _filter, Bounds = bounds });This is in addition to the If this still doesn't resolve the issue, a more fundamental architectural change would be needed - such as manually capturing just the background content to a separate surface before blurring, rather than using the backdrop filter mechanism. Would you like me to explore that approach? |
Contributor
|
The build 189051 found UI Test snapshots differences: Details
|
Contributor
|
🤖 Your Docs stage site is ready! Visit it here: https://unodocsprstaging.z13.web.core.windows.net/pr-22180/docs/index.html |
Contributor
|
🤖 Your WebAssembly Skia Sample App stage site is ready! Visit it here: https://unowasmprstaging.z20.web.core.windows.net/pr-22180/wasm-skia-net9/index.html |
Contributor
|
The build 189059 found UI Test snapshots differences: Details
|
Contributor
|
The build 189059 found UI Test snapshots differences: Details
|
Contributor
|
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR fixes the issue where nearby elements bleed through the Acrylic brush effect in the Skia renderer.
Root Cause
The
GenerateGaussianBlurEffectmethod was ignoring theBorderModeproperty and always expanding the blur's crop rect by 100 pixels whenUseBlurPaddingwas true. Additionally, theSaveLayercall had no bounds constraint.Solution
Implement support for
BorderMode.HardinGenerateGaussianBlurEffect:BorderModeisHard, don't expand the blur paddingAdd
Boundsto theSKCanvasSaveLayerRec:Testing
Added a new runtime test
When_Nearby_Dark_Element_Should_Not_Bleed_Throughthat verifies a dark element placed next to an acrylic element doesn't cause the acrylic's edge pixels to become darkened.Fixes https://github.com/unoplatform/uno/issues/21095
Original prompt
Acrylic#21231💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.