Skip to content

Commit 92a0916

Browse files
Saadnajmiclaude
andauthored
fix(fabric): fix Text overflow in ScrollView on first render (macOS) (#2880)
## Summary - Add a `layoutSubviews` override in `RCTScrollViewComponentView` on macOS that resets the `_containerView` (documentView) frame to `_contentSize` after AppKit's autoresizing corrupts it - This fixes massive horizontal and vertical overflow when Text is nested inside a ScrollView on the first render ## Root Cause On macOS, the `_containerView` serves as the `NSScrollView`'s `documentView`, whose frame **directly determines the scrollable content area** (unlike iOS where `UIScrollView.contentSize` is a separate property). React's layout system explicitly manages `_containerView.frame` via `updateState:` to match the content bounding rect. However, `autoresizingMask` caused AppKit to **also** resize the container whenever the `NSClipView` resized (e.g., during initial `tile` after mounting). This added the clip view's size delta to the container's dimensions, inflating it well beyond the correct content size. The `layoutSubviews` override runs after AppKit's layout pass (which triggers autoresizing), so it reliably corrects the frame back to the React-managed `_contentSize`. The issue self-corrects on window resize because the size change triggers a React re-layout that overwrites the corrupted frame with fresh measurements. ## Test plan | Before (bug) | After (fix) | |---|---| | <img src="https://github.com/user-attachments/assets/6a63357e-6dd3-4f69-b134-2d0f78c5b995" /> | <img src="https://github.com/user-attachments/assets/5678e2ad-bc40-4987-aaa3-5854c809649e" /> | Fixes #2857 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
1 parent cb0f4ad commit 92a0916

File tree

1 file changed

+24
-0
lines changed

1 file changed

+24
-0
lines changed

packages/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,30 @@ - (void)dealloc
184184
#endif // [macOS]
185185
}
186186

187+
#if TARGET_OS_OSX // [macOS
188+
- (void)layoutSubviews
189+
{
190+
[super layoutSubviews];
191+
192+
// On macOS, the _containerView is the NSScrollView's documentView and has autoresizingMask set so
193+
// it fills the visible area before React's first layout pass. However, AppKit's autoresizing can
194+
// corrupt the documentView's frame by adding the NSClipView's size delta to the container's
195+
// dimensions (e.g., during initial tile or window resize), inflating it well beyond the correct
196+
// content size. This produces massive horizontal and vertical overflow on first render.
197+
//
198+
// After React has set the content size via updateState:, we reset the documentView frame here to
199+
// undo any autoresizing corruption. This runs after AppKit's layout (which triggers autoresizing),
200+
// so it reliably corrects the frame.
201+
if (!CGSizeEqualToSize(_contentSize, CGSizeZero)) {
202+
CGRect containerFrame = _containerView.frame;
203+
if (!CGSizeEqualToSize(containerFrame.size, _contentSize)) {
204+
containerFrame.size = _contentSize;
205+
_containerView.frame = containerFrame;
206+
}
207+
}
208+
}
209+
#endif // macOS]
210+
187211
#if TARGET_OS_IOS
188212
- (void)_registerKeyboardListener
189213
{

0 commit comments

Comments
 (0)