From 21d59b632b51dbc69b1e5a998981513a48cce58d Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Fri, 18 Sep 2026 22:32:57 +0200 Subject: [PATCH] fix: avoid safe area insets from growing on scroll on web Scrolling on a page can move the `SafeAreaProvider` outside the visible part of the page. When the browser's address bar hides or shows, the provider treats this scroll offset as extra safe-area padding. This adds blank space and makes the content jump. This fix prevents negative edge distances from increasing the padding. --- src/NativeSafeAreaProvider.web.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/NativeSafeAreaProvider.web.tsx b/src/NativeSafeAreaProvider.web.tsx index 5bcdf5c..3082a32 100644 --- a/src/NativeSafeAreaProvider.web.tsx +++ b/src/NativeSafeAreaProvider.web.tsx @@ -74,16 +74,19 @@ export function NativeSafeAreaProvider({ // in viewport coordinates and clamp the window insets to the part // overlapping the provider view. const rect = providerElement.getBoundingClientRect(); + + // Scrolling can move the provider beyond the viewport edges. + // Those offsets must not increase the window's safe area insets. insets = { - top: Math.max(0, windowInsets.top - rect.top), + top: Math.max(0, windowInsets.top - Math.max(0, rect.top)), bottom: Math.max( 0, - windowInsets.bottom - (window.innerHeight - rect.bottom), + windowInsets.bottom - Math.max(0, window.innerHeight - rect.bottom), ), - left: Math.max(0, windowInsets.left - rect.left), + left: Math.max(0, windowInsets.left - Math.max(0, rect.left)), right: Math.max( 0, - windowInsets.right - (window.innerWidth - rect.right), + windowInsets.right - Math.max(0, window.innerWidth - rect.right), ), }; frame = {