Hey all,

We found two CSS issues with Pull-to-Refresh on iOS native (i.e. only in the native app, we were unable to reproduce it either using Chrome or an Android device), and we found possible workarounds for it.

The reason why this only happens on iOS is due to an iOS-specific CSS customization from OutSystemsUI that sets the main container with display:grid when the layout uses the new ios-bounce class, as seen below:

My understanding is that this was necessary so that the user is not able to drag the header of the app. So the intended behavior is for the header to always "stick to the top" of the viewport, never draggable.

Issue 1#: Pull-to-Refresh positioned behind header

The first issue that we faced on an iPhone was having the Pull-to-Refresh animation rendering behind the title container. It gives the impression that it's invisible, when in reality it's being covered by the layout header.

This is caused because OutSystemsUI is positioning it without taking into consideration neither the iPhone notch size, nor the header content size. The following CSS fixes it:

/* FIX: Pull-to-Refresh spinner showing up behind the header on iOS */
.ios .layout-native.ios-bounce:not(.hide-header-on-scroll) .pull-to-refresh {
    top: calc(var(--header-size) + var(--header-size-content) + var(--os-safe-area-top));
}

Issue #2: Header becomes draggable while PTR is showing

When the Pull-to-Refresh block is shown, it uses CSS3 Transform to offset the content container vertically by 50px, as seen in the following snippet from OutSystemsUI.

This translation creates a vertical scrollbar on iOS that allows the user to unintentionally drag the entire page by tapping and dragging the layout header, as seen below.

In order to fix it, we had to get hid of the scrollbar generated by the translate3D on the content container, by applying an overflow-y:hidden to the main container.

/* FIX: Prevent the user from being able to drag the app header while
        the Pull-to-Refresh pattern is running */
.ios .layout-native.ios-bounce:not(.hide-header-on-scroll) .main {
    overflow-y: hidden;
}

After patching our theme with the CSS above, the user is no longer able to drag the layout header while the Pull-to-Refresh animation is running.