(On iOS)When opening a popup and scrolling through it the background will also scroll

I've stumbled onto this problem when I tested the popup functionality on iOS. On a Android phone the background is disabled when the popup is open. But on iOS the background is somehow active and it knows the touchresponses. 

There's a lot of information on the internet which causes the bug. Some say the webkit-overflow-scrolling: touch; triggers a native iOS component that seems to listen for touchmove events which we are unable to capture.  And they try to solve it applying JavaScript code that uses the pointer-events CSS-class. 

Also, when investigating the cause via the Inspector-tool on the browser there's a CSS-class called .popup-disable-scroll that comes from the OutSystems (ReactWidget) stylesheet: exampleURLApp.css/OutSystemsReactWidgets.css?KBsx4l2dGrxixyeckcP+5w

.popup-disable-scroll {
height: 100%;
overflow: hidden;
}



I don't know for sure if this code disables the background on Android but it's present and i don't know when it will be called. 

How can I solve this issue? 

Should I use JavaScript or is there an OutSystems code that I can use?

Or should OutSystems fix this in their upcoming releases?

Hotel? Trivago!

:)



Thanks in advance!

What version of the OutSystems platform are you using? What version of Service Studio?

Native Mobile application? Or Web application running on mobile Safari?

Are you using Silk UI or OutSystems UI?

Can you provide a small OML that reproduces the issue?

Hello Andrew,

1. Platform: 10.0.1005.1
2. ServiceStudio: 10.0.828.0
3. It's a Mobile application. Also in OutSystemsNow
4. OutSystemsUI

This problem also occurs on OutSystems 11. I've attached an OML of ServiceStudio version 11. This is from my personal environment.


 

G. Andrew Duthie wrote:

What version of the OutSystems platform are you using? What version of Service Studio?

Native Mobile application? Or Web application running on mobile Safari?

Are you using Silk UI or OutSystems UI?

Can you provide a small OML that reproduces the issue?

Forgot to reply to you in my response