Refine shared Liquid Glass and headers for iOS 27 - #139
Conversation
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
| border: 0.5px solid; | ||
| border-top-color: color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 12%); | ||
| border-right-color: color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 32%); | ||
| border-bottom-color: color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 16%); | ||
| border-left-color: color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 28%); |
There was a problem hiding this comment.
🟡 古い対応ブラウザーでガラス部品の縁が文字色になる
ガラス部品の縁に代替色を設定せず (border) 未対応の色合成を適用するため、対象ブラウザーでは縁が文字色で描画されます。
Impact: Safari 16.1などでは、ボタンやタブを含む多くのガラス部品に濃い不自然な輪郭が表示されます。
color-mix 非対応時の CSS カスケード
対象範囲には Safari 16.1、Chrome 107、Firefox 106 が含まれます。これらの初期対象版には color-mix() がありません。各 border-*-color 宣言は無効になり、border: 0.5px solid の既定値 currentColor が残ります。background-clip: border-area のガードは、このフォールバック経路を保護しません。共有 mixin を使うタブ、セグメント、検索欄、モーダルなどが影響を受けます。
| border: 0.5px solid; | |
| border-top-color: color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 12%); | |
| border-right-color: color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 32%); | |
| border-bottom-color: color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 16%); | |
| border-left-color: color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 28%); | |
| border: 0.5px solid; | |
| border-top-color: rgba($border-color-rgb, 1); | |
| border-right-color: rgba($border-color-rgb, 0.8); | |
| border-bottom-color: rgba($border-color-rgb, 1); | |
| border-left-color: rgba($border-color-rgb, 0.6); | |
| border-top-color: color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 12%); | |
| border-right-color: color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 32%); | |
| border-bottom-color: color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 16%); | |
| border-left-color: color-mix(in srgb, rgb($border-color-rgb), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 28%); |
Was this helpful? React with 👍 or 👎 to provide feedback.
| ion-header.ios:not(.ios26-disabled).header-translucent:not(.header-collapse-condense) { | ||
| &:has(> ion-toolbar.ios:not(.ios26-disabled) > *)::before { | ||
| height: 100%; | ||
| background: rgba(var(--ion-color-base-rgb, var(--ios26-content-box-shadow-rgb)), calc(0.2 * var(--opacity-scale, 1))); |
There was a problem hiding this comment.
🔍 ヘッダー色のフェード変数が未接続
背景色は --opacity-scale を参照しますが、リポジトリ内に設定箇所がありません。説明どおり折りたたみ時に色がフェードするか確認が必要です。
Was this helpful? React with 👍 or 👎 to provide feedback.
|
📊 Ionic 9 Playwright Test Report View the detailed Ionic 9 report: https://rdlabo-dev.github.io/ionic-theme-ios26/pr-139/ Ionic 8 runs against the same screenshots in a separate matrix job. View both results in the workflow run. |
|
📊 Ionic 9 Playwright Test Report View the detailed Ionic 9 report: https://rdlabo-dev.github.io/ionic-theme-ios26/pr-139/ Ionic 8 runs against the same screenshots in a separate matrix job. View both results in the workflow run. |
|
/update-screenshots |
|
📊 Ionic 9 Playwright Test Report View the detailed Ionic 9 report: https://rdlabo-dev.github.io/ionic-theme-ios26/pr-139/ Ionic 8 runs against the same screenshots in a separate matrix job. View both results in the workflow run. |
|
✅ Screenshots have been updated successfully! The new screenshots have been committed to this PR. |
Playwright test results
Details
|
|
📊 Ionic 9 Playwright Test Report View the detailed Ionic 9 report: https://rdlabo-dev.github.io/ionic-theme-ios26/pr-139/ Ionic 8 runs against the same screenshots in a separate matrix job. View both results in the workflow run. |
npm beta publishedCI passed for the merge commit npm install @rdlabo/ionic-theme-ios26@9.1.0-beta.pr139.sha87303ec85ae8 |
1 participant
Refine the theme toward the iOS 27 reference while preserving Ionic components and shared styling. Glass edges now transition smoothly across circular and wide surfaces, with brighter upper/lower edges and lighter button shadows; translucency is retained.
Translucent headers draw one background across all toolbars, with a subtle bottom separator. Collapse fades the tint without changing backdrop blur, and title text retains its fade/slide effect without filtering the surrounding glass. Regular header geometry matches the measured 54pt navigation area. Remove the footer fade, round search fields to 22px, restore search-icon opacity, and remove the idle toggle-handle shadow.
Validation:
npm run buildpassed./main/index/buttonscrolling and screenshot comparisons against native controls.npm run lintreports formatting in local generateddemo/ios/App/App/public/index.htmlanddemo/playwright-report/index.html; neither file is part of this PR.The gradient rim is guarded by
@supports (background-clip: border-area)with the existing border approach as fallback. Visual matching is approximate; this does not implement native optical refraction.