Safari Ajax refresh makes page scroll to top

On a responsive web application when using safari on a mobile device (safari on desktop doesn't behave this way) when using ajax refresh to show/hide content the page automatically scrolls to top. The user experience is terrible because of this.

Does anyone had this issue and have pointers on how to solve it?

Thanks. 

Rodrigo

Hi Rodrigo. Does this happen in any application, or just a specific application? What version of Safari/iOS are you using?

Usually this behavior is associated with links which have href="#", they will cause the page to scroll to the top. If you can identify the link that is causing the issue, then just placing onclick="return false;" will prevent the scroll.

Hi Leonardo,

Thanks for the reply

We were testing on iPhone8 and iPhonex with safari with iOS version 12.1

This is not a href="#" but a onchange action on a radiobutton that refresh a container to show/hide.

When we click on radio button the pages scrolls to top. I don't know why safari have this behavior but kills the user experience.


I don't believe that the putting onclick="return false;" will work on this case.


Thanks,

Rodrigo



Hello Rodrigo. I tried to reproduce your scenario with an iPhone 7, but couldn't.

This is what I came up with (scroll down, and there will be two radio buttons that show/hide a container):

https://leonardofernandes.outsystemscloud.com/Sandbox/


If you're having the same problem in the app above, then it may be a bug that only occurs in more recent iPhone versions. I would suggest you to contact OutSystems support.

If the app above works fine on your device, then something in your application is triggering the scroll. If you can share your code, we could help you more effectively.

Hi Leonardo,


Thanks for your effort and time on this issue. 

I have found that was the custommasks component that was making this scroll/focus.We disabled the custom masks and it stopped scrolling to top (that is where the mask was being used)

This now requires more investigation, but for now the custommask is going to be disabled on mobile device.


Thanks again.

Rodrigo

Hi Rodrigo. Glad you found the source of the problem.

Maybe you can try posting this issue in the forge component, someone from the team could have a look into it.