feat(ios): -ios-corner-shape alias for the continuous corner curve - #11453
Open
edusperoni wants to merge 2 commits into
Open
edusperoni wants to merge 2 commits into
edusperoni wants to merge 2 commits into
Conversation
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
|
View your CI Pipeline Execution ↗ for commit db8c714
💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗ ☁️ Nx Cloud last updated this comment at |
commit: |
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.
edusperoni
marked this pull request as ready for review
September 28, 2026 20:10
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
PR Checklist
What is the current behavior?
corner-shape: squircle(#11365) maps tokCACornerCurveContinuous. As measured in #11452, Apple's continuous corner and the CSSsuperellipse(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-shapefollows the spec keywords.roundis unchanged.squircleno longer selects the continuouscornerCurve; 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,squirclerenders circular corners through the mask.-ios-corner-shape: continuousexposes Apple's curve. It is implemented as a platform alias ofcorner-shape, the same way browsers treat vendor-prefixed names: a one-longhand shorthand whose converter forwards tocorner-shapeon Apple and expands to nothing elsewhere. It cascades in place, so normal source order and specificity decide:This replaces point 3 of #11452 ("
-ios-corner-shapewins"). A platform-override precedence has no web equivalent, and ordering gives the same migration story with no new engine concept. There are no changes toCssPropertyor the cascade.continuousis also accepted bycorner-shapeitself on Apple platforms, since the property engine re-runs the longhand converter on string values. Android keeps the strict spec grammar.iOS rendering.
continuousselectskCACornerCurveContinuouson the uniform fast path. A newios.drawsCornersNatively(background)is the single predicate deciding native corners vs. path mask, used by draw, clear, mask setup and shadow path generation.continuouswith non-uniform radii, borders or shadows still falls back to circular arcs in the path branches, assquircledid 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: continuoussetslayer.cornerCurveto continuous; uniform radius withcorner-shape: squirclegets aCAShapeLayermask andcornerRadius0; 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: squircleno 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: squirclewith-ios-corner-shape: continuouswhere the iOS system look was intended. Both can be combined, with the iOS alias declared last.