Skip to content

fix(transforms): enable transforms on new arch and fix hit testing on both arches#2866

Merged
Saadnajmi merged 6 commits intomicrosoft:mainfrom
Saadnajmi:macos-transform-updateLayoutMetrics
Mar 23, 2026
Merged

fix(transforms): enable transforms on new arch and fix hit testing on both arches#2866
Saadnajmi merged 6 commits intomicrosoft:mainfrom
Saadnajmi:macos-transform-updateLayoutMetrics

Conversation

@Saadnajmi
Copy link
Collaborator

@Saadnajmi Saadnajmi commented Mar 21, 2026

Summary

CSS transforms (rotate, scale, translateX, etc.) were not rendering on macOS with the New Architecture (Fabric). This PR fixes the root cause and related issues.

Root Cause

On macOS, NSView has no built-in transform property (unlike UIView on iOS). AppKit's layer-backed view system resets layer.transform to identity during its layout/display cycle. This means any transform set on the layer is silently discarded.

Changes

1. Add transform3D property to RCTUIView with anchor point and hit testing fixes

  • Stores the transform in an ivar so it survives AppKit's reset
  • Re-applies the transform in updateLayer (called during AppKit's display phase)
  • wantsUpdateLayer is conditional on having a custom transform or displayLayer: delegate, so drawRect: still works for text views
  • Compensates for macOS layer.anchorPoint defaulting to {0, 0} instead of {0.5, 0.5}, so transforms apply from the view's center
  • hitTest: and RCTUIViewHitTestWithEvent use CALayer coordinate conversion, which correctly accounts for layer.transform (NSView's convertPoint:fromView: does not)

2. Use transform3D in Fabric component views

  • RCTViewComponentView uses self.transform3D instead of self.layer.transform on macOS
  • Removes duplicated anchor point compensation and hitTest: override now handled by RCTUIView

3. Update Paper hit testing callers for transform-aware coordinate conversion

  • Updates RCTUIViewHitTestWithEvent callers in Paper architecture to use the new fromView parameter, enabling transform-aware hit testing in old architecture as well

Test Plan

  • Verified transforms render correctly on macOS Fabric: rotate, scale, translateX, opacity, combined rotate+scale
  • Verified text still renders (conditional wantsUpdateLayer prevents skipping drawRect:)
  • Verified hit testing works on transformed views (Pressable with click counters)
  • Verified no regression on non-transformed views

🤖 Generated with Claude Code

@Saadnajmi Saadnajmi requested a review from a team as a code owner March 21, 2026 05:52
@changeset-bot
Copy link

changeset-bot bot commented Mar 21, 2026

⚠️ No Changeset found

Latest commit: 3be34a9

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@Saadnajmi Saadnajmi changed the title Fix macOS transform not working in Fabric due to missing anchor point compensation in updateLayoutMetrics fix(macos): add missing transform anchor point compensation in updateLayoutMetrics Mar 21, 2026
@Saadnajmi Saadnajmi changed the title fix(macos): add missing transform anchor point compensation in updateLayoutMetrics fix(macOS): enable CSS transforms on macOS Fabric Mar 21, 2026
@Saadnajmi Saadnajmi changed the title fix(macOS): enable CSS transforms on macOS Fabric fix(transforms): enable transforms on new arch and fix hit testing on both arches Mar 21, 2026
@Saadnajmi Saadnajmi marked this pull request as draft March 21, 2026 18:18
@Saadnajmi Saadnajmi force-pushed the macos-transform-updateLayoutMetrics branch from 753b289 to c2c71f2 Compare March 21, 2026 18:46
Saadnajmi and others added 3 commits March 21, 2026 13:56
…nd hit testing fixes

On macOS, AppKit resets layer.transform to identity during its display
cycle because NSView has no built-in transform property. This adds a
transform3D property to RCTUIView that persists the transform and
re-applies it in updateLayer.

Also fixes two related issues in the compat layer:
- Compensates for macOS layer.anchorPoint defaulting to {0,0} instead
  of {0.5, 0.5}, so transforms apply from the view's center.
- Uses CALayer coordinate conversion in hitTest: and
  RCTUIViewHitTestWithEvent, which correctly accounts for layer.transform
  (NSView's convertPoint:fromView: does not).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Use self.transform3D instead of self.layer.transform on macOS in
RCTViewComponentView, which routes through RCTUIView's persistence
and anchor point compensation. Remove duplicated anchor point
compensation and hitTest: override that are now handled by RCTUIView.

Update hit testing callers to use the new RCTUIViewHitTestWithEvent
signature with fromView parameter.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…dinate conversion

Update RCTUIViewHitTestWithEvent callers in Paper architecture to use
the new fromView parameter, enabling transform-aware hit testing in
old architecture as well.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@Saadnajmi Saadnajmi force-pushed the macos-transform-updateLayoutMetrics branch 2 times, most recently from fc041d7 to 08dc34e Compare March 21, 2026 19:07
@Saadnajmi Saadnajmi marked this pull request as ready for review March 22, 2026 02:09
@Saadnajmi Saadnajmi merged commit 70cdc6a into microsoft:main Mar 23, 2026
16 checks passed
@Saadnajmi Saadnajmi deleted the macos-transform-updateLayoutMetrics branch March 23, 2026 19:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants