fix: restore mode-specific projection when native rail is unavailable - #232
Conversation
| const requested = app.classList.contains('ios-theme-vertical-bars') || app.hasAttribute(horizontalFallbackAttribute); | ||
| const suspended = requested && nativePlacements.get(app)?.edge === null; | ||
| if (app.hasAttribute(horizontalFallbackAttribute) !== suspended) app.toggleAttribute(horizontalFallbackAttribute, suspended); |
There was a problem hiding this comment.
🟡 ネイティブレール不在時にクラス操作でモードを解除できない
通常モードで nativeEdge が null の間、有効化クラスは消え、退避属性だけが残ります。アプリがクラスを外しても無効化できず、レール復帰時に意図せず再有効化されます。
Learn more
アプリは ion-app の .ios-theme-vertical-bars クラスでもレールを有効化できます。説明 にもこの方法が示されています。通常モードで nativeEdge: null を受けると、監視処理がクラスを外して退避属性だけで要求を保持します。この状態でアプリが classList.remove('ios-theme-vertical-bars') を呼んでもクラスは既になく、監視処理には解除が伝わりません。その後エッジが復帰すると、残った退避属性を要求と見なしてレールが再有効化されます。
Example: ion-app にクラスを付けていたアプリが、レール不在時に設定画面から classList.remove('ios-theme-vertical-bars') を実行します。表示は変わらず退避属性が残り、次のエッジ通知でレールが戻ります。期待されるのはモードの解除です。
Recommended fix: 要求状態と実効クラスを分離し、公開したクラス操作でも解除を検出できる状態管理にしてください。クラスが既にない状態での classList.remove は MutationObserver で検出できないため、クラスを常に要求の目印として維持できる CSS 制御、または要求を変更する明示的 API への契約変更を検討してください。
Was this helpful? React with 👍 or 👎 to provide feedback.
Native vertical projection previously accepted both an unregistered
nativeEdgeand explicitnull, even though neither confirms a native rail. Require a reported edge matching the requested placement before handing vertical controls to native rendering.While the edge is unknown or null,
verticalBarsOnlykeeps the requested Web rail; the full Native UI Shell temporarily restores its ordinary horizontal layout. Preserve the requested placement for recovery when an edge arrives. OmittingnativeEdgeafter a report preserves the last supplied value, including null. Update the demo's mode state and API documentation accordingly.Validation:
ionicframework.com/docs/img/demos/images failing withnet::ERR_BLOCKED_BY_ORB; this remains unresolved and screenshot baselines were not changed.This PR is stacked onto #230 (
refactor/foldable-device-state).