Skip to content

Fix jagged edge rendering on API 28 - #54525

Closed
Abbondanzo wants to merge 1 commit into
react:mainfrom
Abbondanzo:export-D86263195
Closed

Fix jagged edge rendering on API 28#54525
Abbondanzo wants to merge 1 commit into
react:mainfrom
Abbondanzo:export-D86263195

Conversation

@Abbondanzo

Copy link
Copy Markdown
Contributor

Summary:
Older versions of Android's clipPath APIs do not properly support antialiasing and BackgroundStyleApplicator relies on this API to clip to border radii that are smaller than provided images or views. As a result, this often leaves jagged edges on the outer edges of these images. Android even calls this out in their documentation under the "Canvas.clipPath" section of https://developer.android.com/topic/performance/vitals/render#common-jank.

This change introduces a new API in BackgroundStyleApplicator called clipToPaddingBoxWithAntiAliasing which takes an additional argument over the existing clipToPaddingBox: a draw call. If non-null and the Android API is 28 or lower, a new drawPath operation is used to mark the pixels outside of the drawn contents as transparent.

Changelog: [Android][Fixed] - Fixed antialiasing issues from border radius usage in API <= 28

Differential Revision: D86263195

@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 Nov 13, 2025
@meta-codesync

meta-codesync Bot commented Nov 13, 2025

Copy link
Copy Markdown

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

Summary:
Pull Request resolved: #54525

Older versions of Android's clipPath APIs do not properly support antialiasing and BackgroundStyleApplicator relies on this API to clip to border radii that are smaller than provided images or views. As a result, this often leaves jagged edges on the outer edges of these images. Android even calls this out in their documentation under the "Canvas.clipPath" section of https://developer.android.com/topic/performance/vitals/render#common-jank.

This change introduces a new API in BackgroundStyleApplicator called `clipToPaddingBoxWithAntiAliasing` which takes an additional argument over the existing `clipToPaddingBox`: a draw call. If non-null and the Android API is 28 or lower, a new drawPath operation is used to mark the pixels outside of the drawn contents as transparent.

Changelog: [Android][Fixed] - Fixed antialiasing issues from border radius usage in API <= 28

Reviewed By: haixia-meta

Differential Revision: D86263195
@meta-codesync meta-codesync Bot closed this in e08abbc Nov 14, 2025
@facebook-github-bot facebook-github-bot added the Merged This PR has been merged. label Nov 14, 2025
@meta-codesync

meta-codesync Bot commented Nov 14, 2025

Copy link
Copy Markdown

This pull request has been merged in e08abbc.

@react-native-bot

Copy link
Copy Markdown
Collaborator

This pull request was successfully merged by @Abbondanzo in e08abbc

When will my fix make it into a release? | How to file a pick request?

douglowder pushed a commit to react-native-tvos/react-native-tvos that referenced this pull request Nov 15, 2025
Summary:
Pull Request resolved: react/react-native#54525

Older versions of Android's clipPath APIs do not properly support antialiasing and BackgroundStyleApplicator relies on this API to clip to border radii that are smaller than provided images or views. As a result, this often leaves jagged edges on the outer edges of these images. Android even calls this out in their documentation under the "Canvas.clipPath" section of https://developer.android.com/topic/performance/vitals/render#common-jank.

This change introduces a new API in BackgroundStyleApplicator called `clipToPaddingBoxWithAntiAliasing` which takes an additional argument over the existing `clipToPaddingBox`: a draw call. If non-null and the Android API is 28 or lower, a new drawPath operation is used to mark the pixels outside of the drawn contents as transparent.

Changelog: [Android][Fixed] - Fixed antialiasing issues from border radius usage in API <= 28

Reviewed By: haixia-meta, lenaic

Differential Revision: D86263195

fbshipit-source-id: 5dba744da08a3c9297f921baf7d4f1a354404f74
meta-codesync Bot pushed a commit that referenced this pull request Apr 7, 2026
Summary:
Pull Request resolved: #55480

Rolls out the antialiased clipping code path introduced in #54525

Changelog: [Internal]

Reviewed By: NickGerleman

Differential Revision: D92742063

fbshipit-source-id: fa47774082017d0961b1ceae934334a81ae1b3ab
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. fb-exported 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.

3 participants