Skip to content

fix: a selected glass chip is readable - #119

Open
SRWieZ wants to merge 1 commit into
NativePHP:mainfrom
SRWieZ:fix/ios-glass-chip-selected
Open

SRWieZ wants to merge 1 commit into
NativePHP:mainfrom
SRWieZ:fix/ios-glass-chip-selected

Conversation

@SRWieZ

@SRWieZ SRWieZ commented Oct 3, 2026

Copy link
Copy Markdown
Member

With class="glass" (or glass:interactive) on a native:chip, the selected chip can't be read on iOS 26. Its label uses the theme's on-primary colour, which is meant for the primary fill, but with glass there is no fill: light text on a light glass plate.

Fix: a selected glass chip tints its glass with the fill colour (Glass.tint), the way Apple's own apps show a selected glass filter. On iOS versions before 26 the material fallback fills the capsule instead. Unselected chips and chips without glass are unchanged.

To reproduce:

<native:row class="gap-2">
    <native:chip label="All" :selected="true" class="glass:interactive" />
    <native:chip label="Unread" :selected="false" class="glass:interactive" />
</native:row>

Before / after (iPhone 17 Pro Max simulator, iOS 26.5): "All" is invisible before, and tinted and readable after:

chip

With glass, a selected chip painted its on-primary label over an
untinted glass plate: light text on light glass. The selected state now
tints the glass with the fill colour (iOS 26), or fills the capsule on
older versions, so the label keeps its contrast.
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.

1 participant