Theme: Using mobile device, can not scroll to bottom of system/ boot up shutdown page (Safari iOS 9)

[Madseason41]

When using an iPhone 6 on safari I can not scroll to bottom of the boot up shutdown page. Upon touching the screen to continue scrolling, the page automatically returns to the top.

[iliajie]

I don't know how to reproduce it as I don't have an iPhone. I will see what I can do, probably ask someone. Are there emulators for that? Because if I use Safari emulation, all works fine?

[Madseason41]

I should have mentioned, 1.780 and 17.70 are the Webmin and theme versions.

[iliajie]

Other pages scrolled correctly?

[Madseason41]

Works fine on desktop safari, and on mobile version of chrome.

With mobile safari I get the same behavior on the file manager tab. As soon as I touch the screen a second time to continue scrolling to the bottom, the screen returns to the top. I can never get to the bottom of the page.

[iliajie]

That sounds very strange. Are you on iOS beta version?

[Madseason41]

No beta

[SteffanCline]

I thought I posted this before. If you install XCode on your MacBook Pro, you can use the iOS Simulator to preview your work. Works great and lets you test on all iOS Devices. There's even a WatchOS simulator too. haha.

/Applications/Xcode.app/Contents/Developer/Applications/Simulator.app

[iliajie]

Yes, I remember. I just haven't had chance to do it yet.

[jo-tez]

Same issue here. Lovely theme, just so frustrating that it's almost unusable on iPhone 6

[iliajie]

I'll take a look. It's not closed. :)

I have a lot of other major improvements to do now. I will install XCode of my Mac sooner or later and try fixing it. (in case it's not going to be resolved by upcoming 18.00)

[iliajie]

This issue should be solved in 18.00.

Report back please.

[jo-tez]

Sadly the issue persists on the home (System information) page. As soon as I scroll down, it starts re-rendering the page.

On the plus side, the new version appears to have resolved this issue on other pages, e.g. Postfix configuration page, which was really annoying.

[iliajie]

I honestly have no idea why in the World that would happen.

Glad to hear about other issues got resolved. I bet you can't reproduce it on iPhone using Chrome/Firefox, right?

[jo-tez]

That's what I thought, but I was able to reproduce it on both Chrome and Firefox for iOS

[iliajie]

Really!?

Let me see...

Alright, have a look. This is Chrome on Android 6.0.1:
http://rostovtsev.ru/pub/src/authentic/18.01b/working_scroll_under_chrome.mp4

Tell me something, what if you click option Menu on top right and select Display Desktop version of the site, does it do anything?

[iliajie]

Did you try Desktop mode? It should help.

[iliajie]

Any news here? Switching to desktop helps, right?

[jo-tez]

It makes no difference. I'll try to create a short video to this

[iliajie]

Ok, thanks!

[jo-tez]

https://vimeo.com/170363558
This is on my live server, so I set a password to protect my details. I'll send you the password via your website contact form now.

[iliajie]

Ok.

[iliajie]

This is bizarre! I have not even remote idea of why this is happening!

What about Chrome?

[iliajie]

.. or that was Chrome?

[jo-tez]

I tried everything, Chrome and Firefox for iOS and switching to Desktop mode. No worries, I can live with this 😄 It used to happen on every page, which made the theme almost unusable. Now it only happens on the front page, so it's not a major issue

[iliajie]

Hmm.. Really!? All other pages were fixed after 18.00?

..hmm...

[jo-tez]

Yeah other pages were fixed after 18.00 - I know because before it was really annoying to save any changes, e.g. to Postfix settings, because by the time I scrolled to the bottom to Save, the page would bounce back up. This is not happening anymore, which is great.

[iliajie]

Wow! Cool!

.. I have set it all in my mind now. ..maybe the solution will come by itself, maybe not. .. I'm intended to fix it, whenever it is..

Thanks, pal.

[casparz]

This problem stil exists. It sounds related to a problem described here: kbwood/countdown#50
Could you check if this is the same issue? Looks like iOS Safari doesn't like iframes.

[iliajie]

What theme version do you have installed?

[iliajie]

Interesting post in the link, thanks. Could you try the solution that is in this StackOverflow answer?

[casparz]

This is the solution, after adding the css style snippet in the StackOverflow answer to the theme extension styles.css the page no longer snaps back to the top on my iPhone. I am running version 18.03 af the theme.
Thank you!

[iliajie]

Oh, that is nice. Finally. OK. Do you have any changes on Desktop version? Will it work if you remove height property?

[casparz]

Removing the height property has no influence. Removing the overflow however causes the jumping behaviour to return. I have not encountered any negative effects in desktop safari so far.

[iliajie]

Thanks, pal. I might release a fixed version very soon.

[casparz]

YW, thank you for developing the theme!

[iliajie]

Will be fixed in 18.04 within an hour.

[iliajie]

18.04 is out, please upgrade! 😉

[jo-tez]

This issue is back in 18.20 :(

[iliajie]

It truly don't see how it's possible. I haven't done any changes.

However, I'll double check.

[casparz]

I can conform that it is back. When I reapply the custom CSS mentioned earlier the issue goes away again.

[iliajie]

@casparz could you please post your custom CSS please?

[casparz]

@qooob
html, body {
overflow: auto;
-webkit-overflow-scrolling: touch;
}

[iliajie]

Here is why I removed it, I even commented it. Try it only on body tag:

/* When usingoverflow: autoon <html> -window.scrollTo(0,document.body.scrollHeight)doesn't work*/

[iliajie]

Ahh, well. It wouldn't work.

[iliajie]

It's only happening in Safari browser?

[iliajie]

Hi,

Here is the fix that will satisfy all. Please add it to your custom scripts.js extension and check it on Safari in iOS:

const __ua__ = window.navigator.userAgent,
    ___is_iOS = (!!__ua__.match(/iPad/i) || !!__ua__.match(/iPhone/i)),
    ___is_webkit = (!!__ua__.match(/WebKit/i)),
    ___is_iOSSafari = (___is_iOS && ___is_webkit && !__ua__.match(/CriOS/i) && !__ua__.match(/OPiOS/i));

// Mobile Safari (iOS) fix with pages not scroll to bottom issue #394
(___is_iOSSafari &&
    ($('html').css('overflow', 'auto'))
)

[casparz]

I can confirm it works! Thanks again.

[iliajie]

Great. I will add it to 18.30. Now all will be happy.