12
Views
1
Comments
[OutSystems UI] ROU-12349 (viewport-height JS removal) shipped without the CSS fallbacks — iOS PWA
outsystems-ui
Reactive icon
Forge asset by OutSystems
Application Type
Reactive
Service Studio Version
11.55.88 (Build 65205)

The release notes for this version state:

ROU-12349 – Removed the JavaScript that forced a static pixel value into the --viewport-height CSS variable … Layout CSS now uses layered 100vh/100dvh fallbacks instead, so it tracks the real visible viewport.

The JS removal is in the release. I could not find the CSS changes in the OutSystems UI CSS. Searching the shipped OutSystemsUI stylesheet for dvh returns zero matches, and --viewport-height is still referenced in two rules with no working fallback:

  1. .ios .layout-native.ios-bounce:not(.hide-header-on-scroll) .main { max-height: var(--viewport-height, 100vh); }
    With the variable unset this falls back to 100vh, which in a standalone iOS PWA with an opaque status bar resolves to full screen height, not the webview height.
  2. .phone .osui-dropdown-serverside__balloon--has-not-search .osui-dropdown-serverside__balloon-container { max-height: calc(var(--viewport-height) - 5vh - var(--header-size)); }
    No fallback at all. The declaration is invalid and dropped, so the balloon has no max-height.

Environment: OutSystems 11 Reactive, distributed as a PWA (no MABS / Cordova), OutSystemsUI 2.30.0. Reproduced on iPhone 17 Pro, iPhone 15, and iPad, all iOS 17, standalone (home-screen) mode. Not reproducible in Chrome iOS emulation because it reports env() insets as zero.

Symptom: Bottom bar (.content-bottom) sits 62px below the visible screen edge on the iPhone 17 Pro and does not scroll into view. Server-side dropdown balloons open with no height limit. Prior OutSystemsUI version on the same devices is unaffected.

Diagnostic readout from device (iPhone 17 Pro):

innerHeight 812html.clientHeight 812visualViewport 812docScrollHeight 874--viewport-height ""--os-safe-area-top max(0px, 0px)--os-safe-area-bottom max(34px, 0px)layout: layout layout-side layout-native ios-bouncemain 874 / 874 | grid | max-h 874pxcontent 728 | overflow-y autofooter 90 / 874 | relative

main is sized to 874 (100vh) while the viewport is 812. The 62px difference is the status bar.

Workaround applied in app theme (pending a fix):

css.ios .layout-native.ios-bounce:not(.hide-header-on-scroll) .main {  max-height: 100vh;  max-height: 100dvh;}.phone .osui-dropdown-serverside__balloon--has-not-search .osui-dropdown-serverside__balloon-container {  max-height: calc(100vh - 5vh - var(--header-size));  max-height: calc(100dvh - 5vh - var(--header-size));}

This resolves the iPhone. On iPad, env(safe-area-inset-top) reports a non-zero value even when the webview is positioned below the status bar, so .ios .layout .header { padding-top: var(--os-safe-area-top) } adds padding for a status bar the header isn't under. That may be a separate WebKit issue but is worth noting since it surfaces alongside this one.

I feel like I am missing something, I've spent hours trying to diagnose this.

2026-01-08 17-20-06
David Lourenço
Staff

Hi Scott,

After some tests internally, I could not reproduce either of the two symptoms on an OutSystems 11 Reactive app distributed as a PWA (home-screen / standalone), with OutSystems UI 2.30.0 and the layout-native + ios-bounce layout, on iPhone and iPad.

On 2.30.0 the bottom bar stays on screen, and the Dropdown Server Side balloon (with and without search) keeps a height limit. The header on iPad also does not pick up extra top padding from the safe area.

If you are still seeing this, a short screen recording would help, or an .oml we can import and run on the same setup.

Regards,

David Lourenço

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.