[ios] Inverse scale transforms results in pixelated blurred poor resolution views

Description

We have a production app where we have a pinch gesture handler that allows pinch zooming on a map. When the map is zoomed in (scaled up) the child POIs are scaled down to preserve sizing of POIs. Example, if the parent View is scaled by 100 the child POI View is then scaled by 0.01 to counteract the transform and preserve sizing. This works perfectly on Android; however, IOS results in a very pixelated render of the child POI View. It appears on IOS, when a View has nested scale transforms applied such that they are inverse the resulting render is pixelated. On Android the View appears high resolution as expected. (See screenshots below).

See main code in app/{tabs}/index.jsx of repro.

Related:
https://github.com/facebook/react-native/issues/42837

Steps to reproduce

Both Architectures: Paper & Fabric

IOS

1. Install dependencies npm install and npx pod-install
2. Run npx react-native run-ios or npm start and open on ios expo
3. Notice blurred blue View when it should be a solid red square with blue border (bug)

ANDROID

1. Install dependencies npm install
2. Run npx react-native run-android
3. Notice solid red square with blue border (expected)

React Native Version

0.76.6

Affected Platforms

Runtime - iOS

Output of npx react-native info

System:
  OS: macOS 14.6
  CPU: (16) arm64 Apple M3 Max
  Memory: 145.11 MB / 64.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.20.5
    path: ~/.nvm/versions/node/v18.20.5/bin/node
  Yarn:
    version: 1.22.19
    path: /usr/local/bin/yarn
  npm:
    version: 10.8.2
    path: ~/.nvm/versions/node/v18.20.5/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/marcbourguignon/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.1
      - iOS 18.1
      - macOS 15.1
      - tvOS 18.1
      - visionOS 2.1
      - watchOS 11.1
  Android SDK: Not Found
IDEs:
  Android Studio: 2021.2 AI-212.5712.43.2112.8609683
  Xcode:
    version: 16.1/16B40
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.4.1
    path: /Users/marcbourguignon/.sdkman/candidates/java/current/bin/javac
  Ruby:
    version: 2.7.5
    path: /Users/marcbourguignon/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.1.3
    wanted: ^15.1.3
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.6
    wanted: 0.76.6
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Stacktrace or Logs

No crash; rendering bug

Reproducer

https://github.com/wen-kai/expo-sandbox/tree/scale-bug

Screenshots and Videos

Actual (IOS):

Expected (Android):

reproducer の app/{tabs}/index.jsx から始め、React Native 0.76.6 で一覧にある iOS の手順を Paper と Fabric の両方で実行します。ネストされた逆スケール変換に注目しながら、iOS の結果を Android と比較します。iOS の子ビューが、ぼやけてピクセル化されたビューではなく、青い枠線の付いた単色の赤い正方形としてレンダリングされれば完了です。