Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

[iOS][Fabric] Pinch-zoomed ScrollView breaks (position jumps, cannot zoom back out) after its size changes

Ouverte
  • Quelque chose ne va pas ?
#58,499 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
3/5
Temps estimé
1-2 jours
Accessibilité débutants
25/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
À l'abandon
Stack technique
ios, objective-c, react-native
Domaine
mobile

Piste de recherche

Commencez par updateState:oldState: et prepareForRecycle de RCTScrollViewComponentView, puis exécutez l’exemple reproducer-react-native sur iOS. Vérifiez le comportement pendant un zoom et lors d’un redimensionnement ou d’une rotation ; c’est terminé lorsque la position de défilement reste stable et que le contenu peut à nouveau être entièrement dézoomé après les changements de taille.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

Component: ScrollView Needs: Triage :mag: Platform: iOS
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):

  1. The scrolled position jumps to a different spot.
  2. 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 frame on a view whose transform is 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's bounds by 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.
  • contentSize is set to the unzoomed size while zoomScale != 1. UIScrollView itself keeps contentSize at 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
  1. Run the reproducer on an iOS device or simulator (new architecture is on by default).
  2. Pinch to zoom in (2x or more) and pan somewhere away from the top-left.
  3. Tap "Resize" (changes the ScrollView's height) or rotate the device.
  4. The position jumps. Pinch back out: the content stays stuck in a corner and does not fill the ScrollView.
  5. 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.

Langage dominant
C++
Étoiles
127k
Forks
25.3k
Aucune PR mergée en 30 j

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de react/react-native

Toutes les issues de react/react-native

Issues similaires

Plus d'issues C++

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.