Overflow implementation in Fabric as per Parity to Paper #15338

Nitin-100 · 2025-11-09T12:44:42Z

Description

Type of Change

New feature (non-breaking change which adds functionality)

Why

The overflow CSS property was not implemented in the Fabric Composition architecture. Paper XAML architecture has supported overflow, but Fabric was missing this functionality entirely. This PR closes the feature gap between the two architectures where views with overflow: hidden do not clip their children in Fabric apps, while they work correctly in Paper apps. This change brings Fabric to parity with Paper by implementing the missing overflow property support.

What

Added overflow clipping support to the Fabric architecture by introducing a dedicated m_contentVisual for mounting children and applying clipping in CompositionViewComponentView.cpp:

Created m_contentVisual - A separate visual layer that is a child of m_visual, used specifically for mounting child components. This allows clipping to be applied independently of the border/background visual.
Updated ensureVisual() - Creates m_contentVisual as a child of m_visual when the visual is initialized.
Updated VisualToMountChildrenInto() - Returns m_contentVisual so all children are mounted into the clippable content visual.
Updated updateLayoutMetrics() - Sizes and offsets m_contentVisual to match the content area (excluding borders), and applies overflow clipping using SetClippingPath with a path geometry that accounts for border radii.

The implementation:

Uses BorderPrimitive::resolveAndAlignBorderMetrics() to get accurate border widths
Calculates inner border radii by subtracting border widths from outer radii
Uses BorderPrimitive::GenerateRoundedRectPathGeometry() to create the clip path
Applies clipping via SetClippingPath on m_contentVisual when getClipsContentToBounds() returns true
Clears the clip by passing nullptr when overflow is not hidden

This approach properly handles:

Rectangular clipping (no border radius)
Rounded corner clipping with border radius
Border thickness offset for accurate content area clipping

Screenshots

Paper overflow

Fabric with overflow (before)

ovefflow.mp4

Testing

overflowTest.tsx

Tested with RNTester View overflow examples and custom overflowTest.tsx by navigating to View component and scrolling to the Overflow section. Verified that:

Views with overflow: hidden now properly clip overflowing child content
Rectangular clipping works correctly (no border radius)
Rounded corner clipping works correctly (with border radius)
Text overflow clipping works correctly
Boxes with overflow: visible correctly allow content to extend beyond their bounds

Ran both playground.sln (Paper) and playground-composition.sln (Fabric) to verify identical behavior between the two architectures.

Changelog

Should this change be included in the release notes: yes

Implemented overflow property support for Fabric architecture. Views with overflow: hidden now properly clip their children to the container bounds, achieving parity with Paper architecture. Added m_contentVisual to properly separate content clipping from border rendering.

HariniMalothu17 · 2025-11-10T05:01:02Z

@Nitin-100
Based on the screenshot u shared there is no visual indication here that the 'overflow' prop is actually implemented
Please check the screenshot section in this link
#14527

Nitin-100 · 2025-11-10T09:21:42Z

/azp run

azure-pipelines · 2025-11-10T09:22:06Z

Azure Pipelines successfully started running 2 pipeline(s).

acoates-ms · 2025-11-10T16:21:56Z

We already use a clip for rounded corners to clip the background: ComponentView::updateClippingPath.

Really we need to stop doing that for rounded corners, which means fixing our background logic for rounded corners so that that clip is not required. Then we can do this change.

acoates-ms

Need to work out how to not conflict with the existing clip.

anupriya13 · 2025-12-01T04:21:40Z

Looks like the prop is not working as expected as per the screenshots attached. Please add E2ETestApp unit tests as well and more examples in playground.

Nitin-100 · 2025-12-01T04:23:47Z

Looks like the prop is not working as expected as per the screenshots attached. Please add E2ETestApp unit tests as well and more examples in playground.

Changes are not added yet, I'm busy with release work.

anupriya13 · 2025-12-01T04:22:57Z

vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp

       layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
+
+  // Apply overflow clipping
+  if (m_props && m_props->yogaStyle.overflow() == facebook::yoga::Overflow::Hidden) {


What about other overflow types?

getClipsContentToBounds check this

anupriya13 · 2025-12-01T04:24:49Z

vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp

+        winrt::Microsoft::ReactNative::Composition::Experimental::MicrosoftCompositionContextHelper::InnerVisual(
+            Visual());
+    if (compVisual) {
+      compVisual.Clip(nullptr);


This is as good as doing nothing, right?
If no clip was ever applied, this line is redundant.

Re-review the code.

anupriya13 · 2025-12-01T04:26:08Z

Looks like the prop is not working as expected as per the screenshots attached. Please add E2ETestApp unit tests as well and more examples in playground.

Changes are not added yet, I'm busy with release work.

Sure, please convert this PR to draft while you work on it.

Hi OSG Instrumentation Team, I'm working on React Native Windows telemetry. We currently have: ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ EXISTING (working): - JavaScript CLI telemetry via 1DS SDK - Instrumentation Key: 49ff6d3ef12f4578a7b75a2573d9dba8-026332b2-2d50-452f-ad0d-50f921c97a9d-7145 - Data flows to: Aria → Kusto - Kusto cluster: [YOU NEED TO TELL ME THIS] NEW (want to add): - Native C++ telemetry via ETW/TraceLogging - Provider Name: Microsoft.ReactNativeWindows.Telemetry - Provider GUID: [WILL GENERATE] ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ QUESTION: Can you register the new ETW provider GUID and route it to the SAME Aria tenant as our existing 1DS instrumentation key? Goal: Have both JavaScript (1DS) and C++ (ETW) telemetry appear in the same Kusto database for unified querying. Is this possible? If yes, what info do you need from me? Thanks, Harini Malothu React Native Windows Team

Nitin-100 requested a review from a team as a code owner November 9, 2025 12:44

Nitin-100 force-pushed the nitin/parity-fabric/overflow branch from 5603646 to 8527924 Compare November 10, 2025 07:14

Nitin Chaudhary added 2 commits November 10, 2025 12:48

Implement overflow property support for Fabric architecture

42cd123

Change files

85b860f

Nitin-100 force-pushed the nitin/parity-fabric/overflow branch from 8527924 to 85b860f Compare November 10, 2025 07:18

Merge branch 'main' into nitin/parity-fabric/overflow

923467f

acoates-ms requested changes Nov 10, 2025

View reviewed changes

microsoft-github-policy-service bot added the Needs: Author Feedback The issue/PR needs activity from its author (label drives bot activity) label Nov 10, 2025

Merge branch 'main' into nitin/parity-fabric/overflow

3359743

microsoft-github-policy-service bot removed the Needs: Author Feedback The issue/PR needs activity from its author (label drives bot activity) label Nov 16, 2025

anupriya13 self-requested a review December 1, 2025 04:22

anupriya13 requested changes Dec 1, 2025

View reviewed changes

microsoft-github-policy-service bot added the Needs: Author Feedback The issue/PR needs activity from its author (label drives bot activity) label Dec 1, 2025

microsoft-github-policy-service bot removed the Needs: Author Feedback The issue/PR needs activity from its author (label drives bot activity) label Dec 1, 2025

Nitin-100 and others added 3 commits December 1, 2025 10:53

Merge branch 'main' into nitin/parity-fabric/overflow

968d635

Remove overflowTest.tsx - will attach separately in PR

d82c4dd

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Overflow implementation in Fabric as per Parity to Paper #15338

Overflow implementation in Fabric as per Parity to Paper #15338

Nitin-100 commented Nov 9, 2025 •

edited

Loading

Uh oh!

HariniMalothu17 commented Nov 10, 2025

Uh oh!

Nitin-100 commented Nov 10, 2025

Uh oh!

azure-pipelines bot commented Nov 10, 2025

Uh oh!

acoates-ms commented Nov 10, 2025

Uh oh!

acoates-ms left a comment

Uh oh!

anupriya13 commented Dec 1, 2025

Uh oh!

Nitin-100 commented Dec 1, 2025

Uh oh!

anupriya13 Dec 1, 2025

Uh oh!

Nitin-100 Dec 1, 2025

Uh oh!

anupriya13 Dec 1, 2025

Uh oh!

Nitin-100 Dec 1, 2025

Uh oh!

anupriya13 commented Dec 1, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Overflow implementation in Fabric as per Parity to Paper #15338

Are you sure you want to change the base?

Overflow implementation in Fabric as per Parity to Paper #15338

Conversation

Nitin-100 commented Nov 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of Change

Why

What

Screenshots

Paper overflow

Fabric with overflow (before)

Testing

Changelog

Uh oh!

HariniMalothu17 commented Nov 10, 2025

Uh oh!

Nitin-100 commented Nov 10, 2025

Uh oh!

azure-pipelines bot commented Nov 10, 2025

Uh oh!

acoates-ms commented Nov 10, 2025

Uh oh!

acoates-ms left a comment

Choose a reason for hiding this comment

Uh oh!

anupriya13 commented Dec 1, 2025

Uh oh!

Nitin-100 commented Dec 1, 2025

Uh oh!

anupriya13 Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

Nitin-100 Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

anupriya13 Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

Nitin-100 Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

anupriya13 commented Dec 1, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Nitin-100 commented Nov 9, 2025 •

edited

Loading