Skip to content

iOS WebKit: Window dimensions (useWindowDimensions) behave erratically when zooming #2779

Open
@qwertychouskie

Description

@qwertychouskie

Is there an existing issue for this?

  • I have searched the existing issues

Describe the issue

Supposedly this was fixed in #1905, but I am still running into this issue. When I pinch-to-zoom on iOS Safari, elements that use the dimensions from useWindowDimensions() jump around, and a look at debug logging I added confirms the values are jumping around. Interestingly, useSafeAreaFrame() does not appear to have this issue.

Screen.Recording.2025-05-17.at.4.20.15.AM.mp4

Expected behavior

The reported window dimensions should be accurate and stable.

Steps to reproduce

  1. Pinch-to-zoom on iOS Safari

Test case

My code for reference:

import { EdgeInsets, useSafeAreaFrame, useSafeAreaInsets } from "react-native-safe-area-context"
import { Platform, useWindowDimensions } from "react-native";

export default (): { width: number, height: number, insets: EdgeInsets } => {

    // Workaround https://github.com/facebook/react-native/issues/41918
    const { height, width } = Platform.OS === 'android'? useSafeAreaFrame() : useWindowDimensions();

    console.warn(`width: ${width}, height: ${height}`)

    return {
        height,
        width,
        insets: useSafeAreaInsets()
    }

}

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions