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

[wen-kai]

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:
#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):

[sarthak-d11]

Hi @wen-kai,

Based on the output of npx react-native info, it seems you’re currently using the old architecture (newArchEnabled: false). Would it be possible for you to check if this issue occurs on the new architecture as well?

[wen-kai]

@sarthak-d11 yes, sorry if I didn't clarify, this behavior is also happening on new architecture as well on iOS. Android is as expected.

[sarthak-d11]

I was able to reproduce on newarch only for ios.

new arch -

old arch -