From f3650be0778f2772457357d6a05c78de74f99aa6 Mon Sep 17 00:00:00 2001 From: Saad Najmi Date: Tue, 31 Mar 2026 18:19:00 -0500 Subject: [PATCH] fix(fabric): fix Text overflow in ScrollView on first render (macOS) On macOS, the _containerView (NSScrollView's documentView) has autoresizingMask set so it fills the visible area before React's first layout pass. However, AppKit's autoresizing corrupts the documentView's frame by adding the NSClipView's size delta to the container's dimensions (e.g., during initial tile or window attachment), inflating it well beyond the correct content size and producing massive horizontal and vertical overflow on first render. The fix adds a layoutSubviews override on macOS that resets the documentView frame to the correct React-managed content size after AppKit's layout pass (which triggers autoresizing). This corrects the corruption while preserving the autoresizingMask needed for the documentView to fill the visible area before React's first updateState. Fixes https://github.com/microsoft/react-native-macos/issues/2857 Co-Authored-By: Claude Opus 4.6 --- .../ScrollView/RCTScrollViewComponentView.mm | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm b/packages/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm index 8c309adba96..4a80bdf5b26 100644 --- a/packages/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm +++ b/packages/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm @@ -184,6 +184,30 @@ - (void)dealloc #endif // [macOS] } +#if TARGET_OS_OSX // [macOS +- (void)layoutSubviews +{ + [super layoutSubviews]; + + // On macOS, the _containerView is the NSScrollView's documentView and has autoresizingMask set so + // it fills the visible area before React's first layout pass. However, AppKit's autoresizing can + // corrupt the documentView's frame by adding the NSClipView's size delta to the container's + // dimensions (e.g., during initial tile or window resize), inflating it well beyond the correct + // content size. This produces massive horizontal and vertical overflow on first render. + // + // After React has set the content size via updateState:, we reset the documentView frame here to + // undo any autoresizing corruption. This runs after AppKit's layout (which triggers autoresizing), + // so it reliably corrects the frame. + if (!CGSizeEqualToSize(_contentSize, CGSizeZero)) { + CGRect containerFrame = _containerView.frame; + if (!CGSizeEqualToSize(containerFrame.size, _contentSize)) { + containerFrame.size = _contentSize; + _containerView.frame = containerFrame; + } + } +} +#endif // macOS] + #if TARGET_OS_IOS - (void)_registerKeyboardListener {