Skip to content

Fix animation artifacting in RNTester example on iOS (#58675) - #58675

Closed
jasozh wants to merge 1 commit into
react:mainfrom
jasozh:export-D121559781
Closed

jasozh wants to merge 1 commit into
react:mainfrom
jasozh:export-D121559781

Conversation

@jasozh

@jasozh jasozh commented Sep 24, 2026 •

Copy link
Copy Markdown
Contributor

Summary:

Prevents the RNTester examples in Animated > Transform Styles from exhibiting the issue referenced in #43763, where rotateX and rotateY show animation artifacting on iOS.

Root Cause

Fabric flattens away the parent view that would normally provide a native layer boundary. iOS Core Animation then processes the rotateX/rotateY 3D layer in the same hierarchy as sibling controls, causing incorrect depth composition and rendering artifacts.

This PR

Modify TransformStylesExample.js to add the isolation: 'isolate' style on the View wrapper so it is retained in the native stacking context. This doesn't fix the root problem but documents the root cause and a workaround until a framework fix is implemented.

Changelog: [Internal]

Reviewed By: cortinico

Differential Revision: D121559781

@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Sep 24, 2026
@meta-codesync

meta-codesync Bot commented Sep 24, 2026

Copy link
Copy Markdown

@jasozh has exported this pull request. If you are a Meta employee, you can view the originating Diff in D121559781.

@cortinico cortinico left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review automatically exported from Phabricator review in Meta.

@meta-codesync meta-codesync Bot changed the title Fix animation artifacting in RNTester example on iOS Fix animation artifacting in RNTester example on iOS (#58675) Sep 30, 2026
jasozh added a commit to jasozh/react-native that referenced this pull request Sep 30, 2026
Summary:

Prevents the RNTester examples in Animated > Transform Styles from exhibiting the issue referenced in [react#43763](react#43763), where rotateX and rotateY show animation artifacting on iOS.

### Root Cause

Fabric flattens away the parent view that would normally provide a native layer boundary. iOS Core Animation then processes the rotateX/rotateY 3D layer in the same hierarchy as sibling controls, causing incorrect depth composition and rendering artifacts.

### This PR

Modify `TransformStylesExample.js` to add the `isolation: 'isolate'` style on the View wrapper so it is retained in the native stacking context. This doesn't fix the root problem but documents the root cause and a workaround until a framework fix is implemented.

Changelog: [Internal]

Reviewed By: cortinico

Differential Revision: D121559781
Summary:
Pull Request resolved: react#58675

Prevents the RNTester examples in Animated > Transform Styles from exhibiting the issue referenced in [react#43763](react#43763), where rotateX and rotateY show animation artifacting on iOS.

### Root Cause

Fabric flattens away the parent view that would normally provide a native layer boundary. iOS Core Animation then processes the rotateX/rotateY 3D layer in the same hierarchy as sibling controls, causing incorrect depth composition and rendering artifacts.

### This PR

Modify `TransformStylesExample.js` to add the `isolation: 'isolate'` style on the View wrapper so it is retained in the native stacking context. This doesn't fix the root problem but documents the root cause and a workaround until a framework fix is implemented.

Changelog: [Internal]

Reviewed By: cortinico

Differential Revision: D121559781
@meta-codesync meta-codesync Bot closed this in cf9eab1 Sep 30, 2026
@meta-codesync meta-codesync Bot added the Merged This PR has been merged. label Sep 30, 2026
@meta-codesync

meta-codesync Bot commented Sep 30, 2026

Copy link
Copy Markdown

This pull request has been merged in cf9eab1.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Merged This PR has been merged. meta-exported p: Facebook Partner: Facebook Partner

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants