react / react/react-native

Setting caretHidden for a TextInput component on iOS (iPhone SE 3) causes continuous metal rendering errors

オープン
#58,157 コメント 1 件 リアクション 1 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

Component: TextInput Needs: Triage :mag: Platform: iOS
主要言語
C++
スター
127k
フォーク
25.3k
平均マージ
1日 23時間
マージ済み PR(30日)
4

説明

Description

Setting the caretHidden prop on a <TextInput> component when rendered on iOS results in an error that spams the iOS logs (~ 20-30 times per second):

Surface 1073741823 x 1073741823 is too large

As the error is generated so frequently this creates a lot of activity on the app. In my use case this is causing XCUITest to wait continuously for the app to be idle which never happens, so our end to end tests tend to stall when displaying a text input with a hidden caret.

We are using the iPhone SE 3 in the simulator for our testing which shows the error, it does not seem to occur with the iPhone 17 Pro, I haven't tested other phones but the obvious difference is the home button on the SE 3. I was able to reproduce this problem on a fresh v0.87 metro app with a single text input.

I believe this may be due to calculations that use the caret position that run even though the caret is not displayed, though I'm not 100% sure.

RCTUITextField.mm (for single line input) and RCTUITextView.mm for multi line input both set the caret to CGRectZero which would give it dimensions and size of 0, which I could see causing the problem, though I'm not sure what code is using these values for calculations.

Steps to reproduce
  1. Install the app with npm install
  2. Run the app on iOS on the iPhone SE 3 with npm run ios -- --simulator="iPhone SE 3"
  3. Open the Console.app and start viewing logs for the simulator (you can filter by metal to make the error more clear)
  4. Focus the input field by tapping on it
  5. Check the errors in the console app
React Native Version

0.87.1

Affected Platforms

Runtime - iOS

Output of npx @react-native-community/cli info
System:
  OS: macOS 26.6.2
  CPU: (14) arm64 Apple M4 Pro
  Memory: 435.84 MB / 48.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 24.11.0
    path: /Users/mario/.local/share/mise/installs/node/24.11.0/bin/node
  Yarn:
    version: 1.22.22
    path: /Users/mario/.local/share/mise/installs/node/24.11.0/bin/yarn
  npm:
    version: 11.6.1
    path: /Users/mario/.local/share/mise/installs/node/24.11.0/bin/npm
  Watchman:
    version: 2026.01.12.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/mario/.local/share/mise/installs/ruby/3.4.8/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.2
      - iOS 26.2
      - macOS 26.2
      - tvOS 26.2
      - visionOS 26.2
      - watchOS 26.2
  Android SDK:
    API Levels:
      - "29"
      - "33"
      - "35"
      - "36"
    Build Tools:
      - 33.0.2
      - 35.0.0
      - 36.0.0
    System Images:
      - android-28 | Google APIs ARM 64 v8a
      - android-29 | Google APIs ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2025.3 AI-253.32098.37.2534.15336583
  Xcode:
    version: 26.2/17C52
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: javac 17
    path: /Users/mario/.local/share/mise/shims/javac
  Ruby:
    version: 3.4.8
    path: /Users/mario/.local/share/mise/installs/ruby/3.4.8/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.2.0
    wanted: 20.2.0
  react:
    installed: 19.2.3
    wanted: 19.2.3
  react-native:
    installed: 0.87.1
    wanted: 0.87.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true
Stacktrace or Logs
Subsystem: com.apple.coreanimation
Category: Metal
Surface 1073741823 x 1073741823 is too large
MANDATORY Reproducer

https://github.com/mariovisic/react-native-example-ios-carret-error

Screenshots and Videos
Image

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

必須の example app で npm installnpm run ios -- --simulator="iPhone SE 3" を使用して問題を再現し、その後 RCTUITextField.mm の 216 行目付近と RCTUITextView.mm の 369~378 行目付近を調べます。caretHidden を有効にした場合の動作と比較し、フィールドにフォーカスがある間の Metal ログを確認します。再現した iOS TextInput のケースで、連続する Surface 1073741823 x 1073741823 is too large エラーが発生しなくなれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
ios, objective-c, react-native
領域
mobile
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
活発
明瞭さ
おおむね明確
初心者へのやさしさ
68/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。