From 6ab9b6125b174c407a718fd9b42b49874aec1209 Mon Sep 17 00:00:00 2001 From: Ali Toshmatov Date: Sat, 13 May 2023 14:31:48 +0500 Subject: [PATCH] [fix] Dimensions measurements with window zoom Fixes `window.height` and `window.width` so that they do not change when pinch-zoomed. This issue was introduced by #2438 when `documentElement` measurements were replaced by `visualViewport`. Close #2520 --- .../react-native-web/src/exports/Dimensions/index.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/react-native-web/src/exports/Dimensions/index.js b/packages/react-native-web/src/exports/Dimensions/index.js index b02412ace..ceb971af7 100644 --- a/packages/react-native-web/src/exports/Dimensions/index.js +++ b/packages/react-native-web/src/exports/Dimensions/index.js @@ -62,8 +62,14 @@ function update() { */ if (win.visualViewport) { const visualViewport = win.visualViewport; - height = Math.round(visualViewport.height); - width = Math.round(visualViewport.width); + /** + * We are multiplying by scale because height and width from visual viewport + * also react to pinch zoom, and become smaller when zoomed. But it is not desired + * behaviour, since originally documentElement client height and width were used, + * and they do not react to pinch zoom. + */ + height = Math.round(visualViewport.height * visualViewport.scale); + width = Math.round(visualViewport.width * visualViewport.scale); } else { const docEl = win.document.documentElement; height = docEl.clientHeight;