fix(tab-bar): fallback safe-area inset for HarmonyOS#4304
fix(tab-bar): fallback safe-area inset for HarmonyOS#4304Darley-Wey wants to merge 3 commits intoTencent:developfrom
Conversation
Read window safe area and expose a css var fallback for env in TabBar. This keeps bottom inset working on HarmonyOS Skyline devices. Closes Tencent#4299. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Darley-Wey
requested review from
anlyyao,
betavs,
jarmywang,
jin0209,
novlan1 and
zydemail
as code owners
There was a problem hiding this comment.
Pull request overview
This PR improves TabBar safe-area handling on HarmonyOS (Skyline) by computing a bottom inset from runtime system info, exposing it to styles via a CSS custom property, and routing existing safe-area CSS to use that custom property.
Changes:
- Compute and cache
safeAreaBottomHeightinTabBarusingsystemInfo.safeArea. - Inject
--safe-area-inset-bottominto the TabBar root inline style, with a fallback toenv(safe-area-inset-bottom). - Update TabBar LESS to use
var(--safe-area-inset-bottom)instead ofenv(safe-area-inset-bottom).
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/components/tab-bar/tab-bar.wxml | Injects a CSS custom property for bottom safe-area inset with an env() fallback. |
| packages/components/tab-bar/tab-bar.ts | Adds safe-area bottom inset calculation and stores it in component data. |
| packages/components/tab-bar/tab-bar.less | Switches safe-area spacing usage to var(--safe-area-inset-bottom). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| setSafeAreaBottomHeight() { | ||
| if (!this.properties.safeAreaInsetBottom) return; | ||
|
|
||
| wx.nextTick(() => { | ||
| const { screenHeight, safeArea } = systemInfo; | ||
| const safeAreaBottomHeight = screenHeight - (safeArea?.bottom ?? screenHeight); | ||
| this.setData({ safeAreaBottomHeight: Math.max(0, safeAreaBottomHeight) }); | ||
| }); |
There was a problem hiding this comment.
The new safe-area fallback logic (setSafeAreaBottomHeight + CSS variable injection) isn't covered by existing TabBar tests. Since this affects layout across platforms (including the HarmonyOS regression), please add a unit/snapshot test that verifies the rendered style includes --safe-area-inset-bottom and that it uses the pixel value when systemInfo.safeArea.bottom implies a non-zero inset (and falls back to env(safe-area-inset-bottom) when the computed value is 0).
| /> | ||
| <view | ||
| style="{{_._style(['z-index: ' + zIndex, style, customStyle])}}" | ||
| style="{{_._style(['z-index: ' + zIndex, style, customStyle, '--safe-area-inset-bottom: ' + (safeAreaBottomHeight ? safeAreaBottomHeight + 'px' : 'env(safe-area-inset-bottom)')])}}" |
There was a problem hiding this comment.
customStyle is no longer the last entry in the _._style([...]) list, so any user-provided customStyle can no longer reliably override the injected --safe-area-inset-bottom value. Most components keep customStyle last to preserve override precedence (e.g. packages/components/sticky/sticky.wxml:5, packages/components/overlay/overlay.wxml:6). Consider moving the injected CSS variable earlier in the array (e.g. after z-index and before style/customStyle) so customStyle remains last.
| style="{{_._style(['z-index: ' + zIndex, style, customStyle, '--safe-area-inset-bottom: ' + (safeAreaBottomHeight ? safeAreaBottomHeight + 'px' : 'env(safe-area-inset-bottom)')])}}" | |
| style="{{_._style(['z-index: ' + zIndex, style, '--safe-area-inset-bottom: ' + (safeAreaBottomHeight ? safeAreaBottomHeight + 'px' : 'env(safe-area-inset-bottom)'), customStyle])}}" |
Move the injected --safe-area-inset-bottom style before style/customStyle so customStyle remains last in _._style and can still override values. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
commit: |
TDesign Component Site Preview Open
|
Summary
systemInfoand cache it assafeAreaBottomHeightin TabBar.--safe-area-inset-bottomintab-bar.wxml, falling back toenv(safe-area-inset-bottom)when value is 0.env(safe-area-inset-bottom)usage intab-bar.lesswithvar(--safe-area-inset-bottom).Test plan
_exampleand verify layout on normal devices.🤖 Generated with Claude Code