Skip to content

Conversation

@protikbiswas100
Copy link
Contributor

@protikbiswas100 protikbiswas100 commented Feb 2, 2026

Description

The boxShadow style property does not render when borderRadius is also set on a View. Only one attribute works at a time - the shadow is ignored if both are present

Type of Change

  • Bug fix (non-breaking change which fixes an issue)

Why

In composition, when a geometric clip is applied to a visual for borderRadius, the clip affects both the visual content AND its DropShadow Since shadows extend outside the visual bounds, the shadow gets clipped and becomes invisible.

What

CompositionSwitcher.idl: Added Mask() and SourcePolicy() methods to IDropShadow interface
CompositionContextHelper.cpp: Implemented Mask() and SourcePolicy() in CompDropShadow, added CompositionDropShadowSourcePolicy type mappings
CompositionViewComponentView.cpp: Updated applyShadowProps() to conditionally use the mask approach when borderRadius is present

Screenshots

Before

15604-before

After
15604-after

Testing

If you added tests that prove your changes are effective or that your feature works, add a few sentences here detailing the added test scenarios.

Changelog

Should this change be included in the release notes: yes

Fixed issue where box with corner radius doesn't have shadow

Microsoft Reviewers: Open in CodeFlow
Microsoft Reviewers: Open in CodeFlow
Microsoft Reviewers: Open in CodeFlow

@protikbiswas100 protikbiswas100 requested review from a team as code owners February 2, 2026 08:55
@microsoft microsoft deleted a comment from azure-pipelines bot Feb 3, 2026
@microsoft microsoft deleted a comment from azure-pipelines bot Feb 3, 2026
@microsoft microsoft deleted a comment from azure-pipelines bot Feb 3, 2026
@microsoft microsoft deleted a comment from azure-pipelines bot Feb 3, 2026
if (
component === 'Flyout' ||
component === 'XAML' ||
component === 'Xaml WinUI3 (Experimental, for Fabric)' ||
Copy link
Contributor

Choose a reason for hiding this comment

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

Why this change added?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The visitAllPages.test.ts E2E test iterates through all component examples in RNTester and visits each page. Some components are skipped because they have known issues with E2E automation (Flyout, XAML, SwipeableCard).

Please see the pipeline error in 0.82 I was getting without this change https://dev.azure.com/ms/react-native-windows/_build/results?buildId=628033&view=logs&s=843cf892-394e-5a95-58a2-f157705529be&j=91433fce-a6a7-5848-fbf7-7248349c63dd

Visual());
if (innerVisual) {
// Create a VisualSurface that captures the visual (with its clip applied)
auto visualSurface = msCompositor.CreateVisualSurface();
Copy link
Contributor

Choose a reason for hiding this comment

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

Are we doing this even for views that do not have a shadow? Looks expensive.

@microsoft-github-policy-service microsoft-github-policy-service bot added the Needs: Author Feedback The issue/PR needs activity from its author (label drives bot activity) label Feb 3, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Needs: Author Feedback The issue/PR needs activity from its author (label drives bot activity)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants