[iOS][Fabric] Pinch-zoomed ScrollView breaks (position jumps, cannot zoom back out) after its size changes
还没有人认领这个 Issue。
- 主要语言
- C++
- 星标
- 127k
- 派生
- 25.3k
- 平均合并
- 1 天 23 小时
- 30 天内合并 PR
- 4
描述
Description
On iOS with the new architecture, a ScrollView with maximumZoomScale > 1 gets into a broken state whenever its size changes while the user is zoomed in (device rotation, or the layout around it changing):
- The scrolled position jumps to a different spot.
- The content can no longer be zoomed all the way back out; it stays stuck against one side or corner.
The only way to recover is to zoom all the way out in the broken state and then resize again (rotate back and forth). After that it works again until the next resize while zoomed.
Cause. RCTScrollViewComponentView returns _containerView from viewForZoomingInScrollView:, so while zoomed in that view carries UIScrollView's scale transform. In updateState:oldState: a content size change does
_containerView.frame = CGRect{RCTCGPointFromPoint(data.contentBoundingRect.origin), contentSize};
...
self->_scrollView.contentSize = contentSize;
- Setting
frameon a view whosetransformis not the identity is undefined behavior per the UIView docs ("If the transform property is not the identity transform, the value of this property is undefined and therefore should be ignored"). In practice UIKit shrinks the container'sboundsby the zoom scale, so when the user zooms back out to scale 1 the content is smaller than the scroll view and sits in a corner. contentSizeis set to the unzoomed size whilezoomScale != 1. UIScrollView itself keepscontentSizeat the zoomed size, so the offset is clamped to the wrong range and the position jumps.
The same code is on main today. prepareForRecycle already hints at it: "Invalidate cached content size so that updateState: recalculates the container frame after zoomScale reset (which may have mutated it in RTL)".
Fix: lay the container out through bounds/center and give the scroll view the zoomed content size. PR: https://github.com/react/react-native/pull/58498
Steps to reproduce
- Run the reproducer on an iOS device or simulator (new architecture is on by default).
- Pinch to zoom in (2x or more) and pan somewhere away from the top-left.
- Tap "Resize" (changes the ScrollView's height) or rotate the device.
- The position jumps. Pinch back out: the content stays stuck in a corner and does not fill the ScrollView.
- Zoom out fully, resize again: it recovers.
React Native Version
0.87.1
Affected Platforms
Runtime - iOS
Output of npx @react-native-community/cli info
Not run: the reproducer repository is a fresh `reproducer-react-native` template pinned to react-native 0.87.1, run on iOS 18 simulator/device.
Stacktrace or Logs
No crash or log output; the bug is visual.
MANDATORY Reproducer
https://github.com/mifi/reproducer-react-native
Screenshots and Videos
None yet.
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
从 RCTScrollViewComponentView 的 updateState:oldState: 和 prepareForRecycle 开始,然后在 iOS 上运行 reproducer-react-native 示例。在缩放以及调整大小或旋转时验证行为;完成标准是滚动位置保持稳定,并且在尺寸变化后内容可以再次完全缩小显示。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- ios, objective-c, react-native
- 领域
- mobile
- Issue 类型
- 缺陷
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 活跃度
- 停滞
- 描述清晰度
- 描述清楚
- 新手友好度
- 25/100