Skip to content

feat(ios): -ios-corner-shape alias for the continuous corner curve - #11453

Open
edusperoni wants to merge 2 commits into
mainfrom
feat/ios-corner-shape
Open

edusperoni wants to merge 2 commits into
mainfrom
feat/ios-corner-shape

Conversation

@edusperoni

Copy link
Copy Markdown
Contributor

PR Checklist

What is the current behavior?

corner-shape: squircle (#11365) maps to kCACornerCurveContinuous. As measured in #11452, Apple's continuous corner and the CSS superellipse(2) are different curves (max gap ~0.19 r), so the property does not render what the CSS Borders Level 4 spec defines, and there is no way to ask for Apple's curve explicitly.

What is the new behavior?

corner-shape follows the spec keywords. round is unchanged. squircle no longer selects the continuous cornerCurve; it is routed through the path-mask branch on every combination, including uniform radii, because CALayer cannot draw it. The superellipse path itself is not part of this PR: the path generators are untouched so that #11451 can rebase on top and draw the curve. Until then, squircle renders circular corners through the mask.

-ios-corner-shape: continuous exposes Apple's curve. It is implemented as a platform alias of corner-shape, the same way browsers treat vendor-prefixed names: a one-longhand shorthand whose converter forwards to corner-shape on Apple and expands to nothing elsewhere. It cascades in place, so normal source order and specificity decide:

.card { corner-shape: squircle; -ios-corner-shape: continuous; } /* iOS: continuous, Android: squircle */
.card { -ios-corner-shape: continuous; corner-shape: squircle; } /* both: squircle */

This replaces point 3 of #11452 ("-ios-corner-shape wins"). A platform-override precedence has no web equivalent, and ordering gives the same migration story with no new engine concept. There are no changes to CssProperty or the cascade.

continuous is also accepted by corner-shape itself on Apple platforms, since the property engine re-runs the longhand converter on string values. Android keeps the strict spec grammar.

iOS rendering. continuous selects kCACornerCurveContinuous on the uniform fast path. A new ios.drawsCornersNatively(background) is the single predicate deciding native corners vs. path mask, used by draw, clear, mask setup and shadow path generation. continuous with non-uniform radii, borders or shadows still falls back to circular arcs in the path branches, as squircle did before; the three-cubic Apple path from #11452 is a follow-up once #11451 lands.

Tests. Property round-trips through Background, alias grammar, and cascade behaviour of the alias (later declaration wins either way, specificity, unset on rule removal, inline style).

Manual test scenarios (need a device/simulator): uniform radius with -ios-corner-shape: continuous sets layer.cornerCurve to continuous; uniform radius with corner-shape: squircle gets a CAShapeLayer mask and cornerRadius 0; switching between them at runtime adds/removes the mask.

Refs #11452. Related: #11451 (spec squircle in the path generators, to be rebased on this).

BREAKING CHANGES:

corner-shape: squircle no longer renders Apple's continuous corner on iOS. It renders the spec shape once #11451 lands, and circular corners through a mask until then.

Migration steps:
Replace corner-shape: squircle with -ios-corner-shape: continuous where the iOS system look was intended. Both can be combined, with the iOS alias declared last.

corner-shape: squircle mapped to kCACornerCurveContinuous, but Apple's
continuous corner and the CSS superellipse(2) are different curves.
corner-shape now follows the CSS Borders Level 4 keywords, and Apple's
curve is exposed through -ios-corner-shape: continuous.

-ios-corner-shape is a platform alias of corner-shape: a one-longhand
shorthand whose converter forwards on Apple and returns nothing
elsewhere, so it cascades in place like a vendor-prefixed property on
the web and normal source order and specificity decide between the two.

On iOS, `continuous` selects the continuous cornerCurve on the uniform
border fast path. `squircle` no longer renders natively; it is routed
through the path mask branch, where the superellipse curve itself is
left for #11451 to draw.

BREAKING CHANGE: corner-shape: squircle no longer renders Apple's
continuous corner. Apps that used it for the iOS system look should
switch to -ios-corner-shape: continuous.

Refs #11452
@nx-cloud

nx-cloud Bot commented Sep 25, 2026 •

Copy link
Copy Markdown

View your CI Pipeline Execution ↗ for commit db8c714

Command Status Duration Result
nx test apps-automated -c=ios ✅ Succeeded 2m 5s View ↗
nx run-many --target=test --configuration=ci --... ✅ Succeeded 1s View ↗

💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗


☁️ Nx Cloud last updated this comment at 2026-09-25 19:39:54 UTC

@pkg-pr-new

pkg-pr-new Bot commented Sep 25, 2026 •

Copy link
Copy Markdown

Open in StackBlitz

npm i https://pkg.pr.new/@nativescript/core@11453
npm i https://pkg.pr.new/@nativescript/vite@11453
npm i https://pkg.pr.new/@nativescript/webpack@11453

commit: db8c714

The corner-shape converter picks its grammar when the property is
declared, so specs could not flip the platform flag to exercise the
non-Apple path. It now reads the flag per value, and the specs run the
alias and the strict grammar with __ANDROID__ set.
@NathanWalker NathanWalker added this to the 9.2 milestone Sep 25, 2026
@edusperoni
edusperoni marked this pull request as ready for review September 28, 2026 20:10

This branch has not been deployed

No deployments
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