Skip to content

BUG | useScreenSafeArea | Safe area values not reactive on initial load #4783

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
7 tasks done
simensol opened this issue May 29, 2025 · 0 comments · May be fixed by #4789
Open
7 tasks done

BUG | useScreenSafeArea | Safe area values not reactive on initial load #4783

simensol opened this issue May 29, 2025 · 0 comments · May be fixed by #4789
Labels
pending triage

Comments

@simensol
Copy link

Describe the bug

When using useScreenSafeArea and useCssVar together as shown below:

const { top: vueUseSafeAreaTop, bottom: vueUseSafeAreaBottom } = useScreenSafeArea()

const safeAreaInsetTopString = useCssVar('--vueuse-safe-area-top', null, {
  observe: true,
})

const safeAreaInsetBottomString = useCssVar('--vueuse-safe-area-bottom', null, {
  observe: true,
})

only the direct CSS variables are set or updated during the initial load of a native iOS PWA running inside a WebView. The VueUse reactive values remain empty or zero until a resize or orientation event occurs.

Observed output:

# Initial Load
[watch] vueUseSafeAreaTop changed: undefined -> ""
[watch] safeAreaInsetTopString changed: undefined -> ""
[watch] vueUseSafeAreaTop changed: "" -> ""
[watch] safeAreaInsetTopString changed: "" -> "47px"

# Orientation change
[watch] vueUseSafeAreaTop changed: "" -> "0px"
[watch] safeAreaInsetTopString changed: "47px" -> "0px"

The current event listeners (e.g., resize) used in useScreenSafeArea

vueuse/packages/core/useScreenSafeArea/index.ts

Line 35 in 04933c9

useEventListener('resize', useDebounceFn(update), { passive: true })

are likely insufficient to detect safe area inset changes during WebView initialization or the initial load on iOS. As a result, the reactive values do not update until a subsequent event, such as an orientation change, triggers an update.

Reproduction

https://playground.vueuse.org/#eNp9VMFy2jAQ/ZUdXezM2HBoTwwwTTM5pIe2U9JeEAfXXsCJLHkkGZjx+N+zksAhYHKTd/e9ffu0csvu63q0a5BN2NTkuqwtGLRNDSKTmxln1nA257KsaqUttLDPbL6FDtZaVRARMDpLNgYXuUaUi2yN9xqzxIUejPmX6R7zjUAUHedKOzCXuZLGoa2qJ0DJv8RyxD+rmnCza+L47oQzx8iTJN1Uv7C6lJuACZ3jKE1Dz9QVpxlVp9QsSkA2QiTUWv03qHc4AasbhI7IufSTxlwCLOM7mM2vpY12mWgwgZAeFhJqVonjiZcS95cGUSjIXCWwVKK4zFPomPddWkcE4GZXAkdCbeJo6aWuBrzLt3SLWExo1AHqKJ07Dy410fQ3W9xw+2OfoPeMPwQ8b+edaKGsKizKzPaec0n56TjsIG0cfVisakEl9AUwLcqdP3w4wvXQE2jboTWiDh48vkE0PJpnuzH1NeXpNB332llCb4i8XJeb0YtRkh6av0POclXVpUD9q7Ylec0Z9QqEnGVCqP0PH3P2eNM8Zov560D8xRxcjLPfGv0qc9bnbKY3aEP6cfETD3Tuk5UqGkHVnyT/IO1B4zSGsu+NLEj2WZ1X++T/AuTLs3k8WJTmNJQT+n71nNHdPHwy+rvcL6OvHsdlx7o3V8mUzQ==

System Info

System:
    OS: Linux 6.10 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (12) arm64 unknown
    Memory: 5.38 GB / 19.50 GB
    Container: Yes
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 22.12.0 - /usr/local/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 11.3.0 - /usr/local/share/npm-global/bin/npm
    pnpm: 9.15.0 - /usr/local/share/npm-global/bin/pnpm
  npmPackages:
    @vueuse/components: ^13.3.0 => 13.2.0 
    @vueuse/core: ^13.1.0 => 13.2.0 
    vue: ^3.5.15 => 3.5.14

Used Package Manager

npm

Validations
@simensol simensol changed the title BUG | useScreenSafeArea | Not reactive on initial load BUG | useScreenSafeArea | Safe area values not reactive on initial load May 29, 2025
@whiteyebrw whiteyebrw linked a pull request May 30, 2025 that will close this issue
Open
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
pending triage
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(useScreenSafeArea): сhanged initial value update whiteyebrw/vueuse
1 participant
@simensol