From 1ad574c204ffab87b244c2cbe076ef260792e71d Mon Sep 17 00:00:00 2001 From: latin-panda <66472237+latin-panda@users.noreply.github.com> Date: Thu, 29 Jan 2026 20:38:46 +0700 Subject: [PATCH 1/4] fixes full-screen issues --- .../src/components/common/map/MapBlock.vue | 30 ++++++++++++++----- 1 file changed, 23 insertions(+), 7 deletions(-) diff --git a/packages/web-forms/src/components/common/map/MapBlock.vue b/packages/web-forms/src/components/common/map/MapBlock.vue index eecdd4925..fff5a6bb4 100644 --- a/packages/web-forms/src/components/common/map/MapBlock.vue +++ b/packages/web-forms/src/components/common/map/MapBlock.vue @@ -262,7 +262,11 @@ const saveAdvancedPanelCoords = (newCoords: Coordinate) => { border: 1px solid var(--odk-border-color); border-radius: var(--odk-radius); overflow: hidden; - // Fixes iPhone select issues on map + // Prevent background scroll-chaining in mobile + overscroll-behavior: none; + // Hand touch gestures (zoom/pan) exclusively to the map engine when in mobile + touch-action: none; + // iPhone - fixes select issues on map -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; @@ -295,18 +299,30 @@ const saveAdvancedPanelCoords = (newCoords: Coordinate) => { } .map-container.map-full-screen { + position: fixed; + inset: 0; display: flex; flex-direction: column; - justify-content: flex-start; - position: fixed; - top: 0; - left: 0; - height: 100vh; width: 100vw; + height: 100dvh; z-index: var(--odk-z-index-topmost); + background: var(--odk-base-background-color); + + // iPhone safe area + padding-bottom: env(safe-area-inset-bottom); + padding-left: env(safe-area-inset-left); + padding-right: env(safe-area-inset-right); .map-block { - flex-grow: 2; + flex: 1 1 0; + width: 100%; + min-height: 0; + height: auto; + } + + :deep(.map-status-bar), + :deep(.advanced-panel) { + flex-shrink: 0; } } From 6025d2ffead831f0d75901d3754689b9276add25 Mon Sep 17 00:00:00 2001 From: latin-panda <66472237+latin-panda@users.noreply.github.com> Date: Thu, 29 Jan 2026 21:00:54 +0700 Subject: [PATCH 2/4] fixes full-screen issues --- packages/web-forms/src/assets/styles/style.scss | 3 +++ .../web-forms/src/components/common/map/MapBlock.vue | 9 +++++---- packages/web-forms/src/demo/FeedbackButton.vue | 2 +- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/web-forms/src/assets/styles/style.scss b/packages/web-forms/src/assets/styles/style.scss index 689b731ce..03a2ba38f 100644 --- a/packages/web-forms/src/assets/styles/style.scss +++ b/packages/web-forms/src/assets/styles/style.scss @@ -80,6 +80,9 @@ /* Overlays like modals, popups, or dialogs above form content */ --odk-z-index-overlay: 100; + /* Floating feedback button */ + --odk-z-index-feedback-button: 900; + /* Critical UI elements (e.g., loading spinners, toast notifications) */ --odk-z-index-topmost: 1000; } diff --git a/packages/web-forms/src/components/common/map/MapBlock.vue b/packages/web-forms/src/components/common/map/MapBlock.vue index fff5a6bb4..8d6927c95 100644 --- a/packages/web-forms/src/components/common/map/MapBlock.vue +++ b/packages/web-forms/src/components/common/map/MapBlock.vue @@ -262,10 +262,6 @@ const saveAdvancedPanelCoords = (newCoords: Coordinate) => { border: 1px solid var(--odk-border-color); border-radius: var(--odk-radius); overflow: hidden; - // Prevent background scroll-chaining in mobile - overscroll-behavior: none; - // Hand touch gestures (zoom/pan) exclusively to the map engine when in mobile - touch-action: none; // iPhone - fixes select issues on map -webkit-user-select: none; user-select: none; @@ -308,6 +304,11 @@ const saveAdvancedPanelCoords = (newCoords: Coordinate) => { z-index: var(--odk-z-index-topmost); background: var(--odk-base-background-color); + // Prevent background scroll-chaining + overscroll-behavior: none; + // Hand touch gestures (zoom/pan) exclusively to the map engine + touch-action: none; + // iPhone safe area padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); diff --git a/packages/web-forms/src/demo/FeedbackButton.vue b/packages/web-forms/src/demo/FeedbackButton.vue index b3cc43bf7..0ebfc3858 100644 --- a/packages/web-forms/src/demo/FeedbackButton.vue +++ b/packages/web-forms/src/demo/FeedbackButton.vue @@ -41,7 +41,7 @@ const surveyLink = computed(() => { right: 0; bottom: 150px; height: 4rem; - z-index: var(--odk-z-index-topmost); + z-index: var(--odk-z-index-feedback-button); border-top-left-radius: var(--odk-radius); border-top-right-radius: var(--odk-radius); text-align: center; From b5bcb15136f5c91f298c0bc923a72eeb0fc9fce9 Mon Sep 17 00:00:00 2001 From: latin-panda <66472237+latin-panda@users.noreply.github.com> Date: Thu, 29 Jan 2026 21:09:06 +0700 Subject: [PATCH 3/4] changeset --- .changeset/thick-mice-tan.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/thick-mice-tan.md diff --git a/.changeset/thick-mice-tan.md b/.changeset/thick-mice-tan.md new file mode 100644 index 000000000..f3d913a73 --- /dev/null +++ b/.changeset/thick-mice-tan.md @@ -0,0 +1,5 @@ +--- +'@getodk/web-forms': patch +--- + +Prevent background scroll and browser zooming in full-screen map From 11dccc8c79ec752a0151814a82b275e0c17f6320 Mon Sep 17 00:00:00 2001 From: latin-panda <66472237+latin-panda@users.noreply.github.com> Date: Fri, 30 Jan 2026 17:38:42 +0700 Subject: [PATCH 4/4] feedback --- packages/web-forms/src/components/common/map/MapBlock.vue | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/web-forms/src/components/common/map/MapBlock.vue b/packages/web-forms/src/components/common/map/MapBlock.vue index 8d6927c95..3fb06aca7 100644 --- a/packages/web-forms/src/components/common/map/MapBlock.vue +++ b/packages/web-forms/src/components/common/map/MapBlock.vue @@ -303,17 +303,13 @@ const saveAdvancedPanelCoords = (newCoords: Coordinate) => { height: 100dvh; z-index: var(--odk-z-index-topmost); background: var(--odk-base-background-color); + border-radius: 0; // Prevent background scroll-chaining overscroll-behavior: none; // Hand touch gestures (zoom/pan) exclusively to the map engine touch-action: none; - // iPhone safe area - padding-bottom: env(safe-area-inset-bottom); - padding-left: env(safe-area-inset-left); - padding-right: env(safe-area-inset-right); - .map-block { flex: 1 1 0; width: 100%;