Overflow implementation in Fabric as per Parity to Paper #15338

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

Desciption

On iOS/Android, overflow: 'hidden' clips child content to the parent view's bounds. On React Native Windows (Fabric), this was not working — children always rendered beyond their parent regardless of the overflow property.

Additionally, shadow (shadowColor, shadowOffset, etc.) was being clipped by the border-radius clip on Visual(), making shadows invisible on rounded-corner views.

How

`m_childrenContainer` — on-demand child clipping visual

A dedicated m_childrenContainer SpriteVisual is created lazily (only when getClipsContentToBounds() is true) as a child of m_visual. Children are mounted into it and clipped via a D2D rounded-rect path geometry.

Visual tree with overflow: hidden:

m_outerVisual          ← shadow applied here (not clipped)
  └── m_visual         ← background, border-radius clip, opacity
        ├── Border × N
        └── m_childrenContainer  ← created on demand, clipped to bounds
              └── <children>

Visual tree with overflow: visible (default):

m_outerVisual
  └── m_visual
        ├── Border × N
        └── <children>           ← mounted directly, no extra visual

Shadow on `OuterVisual()`

Shadow props are now applied to OuterVisual() instead of Visual(). This prevents the border-radius clip (on Visual()) from clipping the shadow.

`RelativeSizeWithOffset` for container sizing

m_childrenContainer uses RelativeSizeWithOffset({0,0}, {1,1}) so it automatically tracks the parent's size without manual size updates.

Files Changed

File	Change
`CompositionViewComponentView.cpp`	`updateChildrenClippingPath()`, `VisualToMountChildrenInto()`, child mount/unmount routing, `applyShadowProps()` → `OuterVisual()`, `updateClippingPath()` simplified to border-radius only
`CompositionViewComponentView.h`	Added `m_childrenContainer`, `updateChildrenClippingPath()` virtual method
`ScrollViewComponentView.cpp`	Override `updateChildrenClippingPath()` as no-op (scroll view clips via `m_scrollVisual`)
`ScrollViewComponentView.h`	Declare the override

Key Design Decisions

Lazy creation — m_childrenContainer only created when overflow: hidden/scroll. Views with overflow: visible (default) have zero overhead.
Child migration — When container is created, existing child visuals are moved from m_visual into m_childrenContainer. New children route through VisualToMountChildrenInto().
Border offset skip — When children are in m_childrenContainer, indexOffsetForBorder() is skipped (children start at index 0 in the container). Applied only when children are directly in m_visual.
Once created, never destroyed — If overflow toggles from hidden→visible, m_childrenContainer stays but its clipping path is set to nullptr. Avoids complex child migration back.
Outer border radii for clip geometry — Matches iOS behavior. Clip path uses resolveAndAlignBorderMetrics + GenerateRoundedRectPathGeometry.
ScrollView no-op — ScrollViewComponentView overrides updateChildrenClippingPath() as no-op because it mounts children into m_scrollVisual which inherently clips.

Testing

overflow: hidden clips children at parent bounds (rect + rounded)
overflow: visible allows children to extend beyond bounds
Shadow visible around views with overflow: hidden
Nested overflow (parent hidden, child visible → parent clips)
Dynamic toggle between hidden/visible at runtime
Transform + overflow interaction
ScrollView unaffected (no-op override)

Changelog

react-native-windows — Added

Implemented overflow: hidden support for Fabric Composition renderer. Views with overflow: 'hidden' now clip children to bounds, matching iOS/Android. Shadow rendering moved to OuterVisual to prevent border-radius clipping.

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 · 2025-12-02T03:48:11Z

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

@acoates-ms Please re review it as I have handled all scenarios now.

sundaramramaswamy

LGTM.

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

Nitin-100 · 2026-02-02T08:50:02Z

@acoates-ms
Changes Done:
Split ensureVisual() into ensureVisual() and ensureContentVisual()
m_contentVisual is now only created when:
Children need to be mounted - MountChildComponentView() calls ensureContentVisual()
overflow:hidden is set - updateLayoutMetrics() checks getClipsContentToBounds() and creates m_contentVisual only if needed

…adowProps

…zation

…idden - Remove ensureContentVisual() calls from VisualToMountChildrenInto() and MountChildComponentView() - m_contentVisual is now only created in updateLayoutMetrics when getClipsContentToBounds() is true - Add null check in onThemeChanged() before accessing Visual() - Restore original ensureVisual() call in MountChildComponentView()

…ontainer Implement proper overflow:hidden clipping for the Fabric Composition renderer, matching iOS/Android behavior. Instead of clipping m_visual directly (which also clips borders and background), a dedicated m_childrenContainer visual is created on-demand as a child of m_visual, and only children are clipped. Visual Tree (with overflow:hidden): m_outerVisual m_visual (background, opacity, transform, border-radius clip) Border Visuals x N m_childrenContainer (created on demand, clipped to bounds) <children> Key design decisions: - m_childrenContainer is created lazily only when overflow:hidden is set - Existing children are moved from m_visual into m_childrenContainer - Once created, m_childrenContainer is never destroyed (clip is just removed if overflow changes back to visible) - Clipping uses outer border radii via D2D path geometry, matching iOS - ScrollView overrides updateChildrenClippingPath as no-op since it manages its own visual tree via m_scrollVisual and inherently clips content Also cleans up: - Removed unnecessary null-checks on Visual() (ensureVisual guarantees it) - Removed shadow mask workaround code (not related to overflow) - Removed InsetClip-based overflow handling from updateProps - Added assert(m_visual) in Visual() accessor - Simplified updateClippingPath to only handle border-radius clipping

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

…ontainer

This reverts commit 5e07f75.

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 suggested 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

sundaramramaswamy approved these changes Dec 15, 2025

View reviewed changes

vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp Outdated Show resolved Hide resolved

Nitin-100 and others added 4 commits January 15, 2026 09:31

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

12172f5

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

3fed8d6

Address review comment: make variables const

e1cf523

Ensure visual is created before accessing m_contentVisual

10745b1

Nitin-100 and others added 2 commits February 2, 2026 10:37

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

a81cab3

Implement lazy m_contentVisual creation for memory efficiency

a225279

Fix crash: skip m_contentVisual creation for custom builder visuals

52b41f1

Nitin-100 closed this Feb 3, 2026

Nitin-100 reopened this Feb 3, 2026

Nitin-100 and others added 9 commits February 3, 2026 10:42

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

c016e7c

Add null check for m_visual in applyShadowProps to prevent crash

833fb53

Fix build: Use Visual() instead of m_visual in ComponentView::applySh…

bd4c1ef

…adowProps

Fix E2E crash: Remove assert in Visual() that crashes before initiali…

f8f031c

…zation

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

1574cc4

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

51865db

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

fa9294a

acoates-ms reviewed Feb 11, 2026

View reviewed changes

vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp Outdated Show resolved Hide resolved

acoates-ms reviewed Feb 11, 2026

View reviewed changes

vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp Show resolved Hide resolved

acoates-ms reviewed Feb 11, 2026

View reviewed changes

vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp Outdated Show resolved Hide resolved

Nitin-100 and others added 10 commits February 11, 2026 09:58

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

b0a546e

Move shadow to OuterVisual, use RelativeSizeWithOffset for children c…

8d8e860

…ontainer

lint,format fixes

689a9e0

update e2e snapshots for overflow changes

5e07f75

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

b3fd117

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

c7efb51

Revert "update e2e snapshots for overflow changes"

7f27e3f

This reverts commit 5e07f75.

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

6a1be71

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

ccb0b96

update e2e snapshots for overflow changes

e70ff62

acoates-ms approved these changes Feb 12, 2026

View reviewed changes

Nitin-100 merged commit 56810ff into microsoft:main Feb 12, 2026
30 checks passed

Overflow implementation in Fabric as per Parity to Paper #15338

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!

Desciption

How

m_childrenContainer — on-demand child clipping visual

Shadow on OuterVisual()

RelativeSizeWithOffset for container sizing

Files Changed

Key Design Decisions

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!

Nitin-100 commented Dec 2, 2025

Uh oh!

sundaramramaswamy left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Nitin-100 commented Feb 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Nitin-100 commented Nov 9, 2025 •

edited

Loading

`m_childrenContainer` — on-demand child clipping visual

Shadow on `OuterVisual()`

`RelativeSizeWithOffset` for container sizing

Nitin-100 commented Feb 2, 2026 •

edited

Loading