[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 在 Paper 和 Fabric 中分别执行列出的 iOS 步骤。比较 iOS 与 Android 的结果，重点关注嵌套的逆缩放变换。完成标准是：iOS 子视图呈现为带蓝色边框的纯红色正方形，而不是模糊、像素化的视图。