Container_autoresize and scrolling broken on Iphone

Scheduler Javascript
#1

Hi, there is a problem with container_autoresize on mobile, when you have long month view and want to scroll rather aggressively down or up. I made a snippet here but you need to move it into single page, so you can experience disappearing of address bar in browser and more natural scaling.

Then try to swipe really fast from bottom to up (or vice versa when you’re at the bottom), like many people do when they see a long list and they want quickly move to the end.

Expected behaviour is to scroll continuously until you reach the bottom or at least until the energy from swipe gesture is exhausted. However, the scrolling stops almost immediately. If you repeat the same swipe gesture again, it works as expected. Also if you scroll/swipe slowly/gently it works as expected.

After debugging it’s caused by container_autoresize plugin, becase it sets scrollTop during the scrolling. Could you please verify and suggest solution or workaround?

The issue is easiest reproducible on Iphone and Chrome (works on Android), sometimes on Safari, but can be also reproduced on Android and Firefox.

Another detail - when scrolling, the scheduler is firing resize event, so it sounds to me that this problem is caused by address bar that is (dis)appearing.
After more debuging another issue comes from dhtmlxscheduler.js because it should not run this code in month view.

Please let me know if you need more info.

I believe this post is about the same issue

#2

I haven’t test it, however there are some cross browser solutions for smoother scrolls … This is probably just a workaround
here
scroll further down to see what I mean

#3

Hi @Luk_Puk,

Thank you for the detailed description of the issue.
Unfortunately, even with it, I was unable to reproduce it on browser dev tools(device toolbar) or on the iPhone(Chrome/Safari browsers).
Scrolling after a single swipe or few swipes works pretty correctly(screencast from the browser, the same result on iPhone):
https://recordit.co/NWo8fG3W1Q

1 Like
#4

Hi @Siarhei, unfortunatelly you cannot reproduce it in dev tools, since there’s no addressbar that is moving while you scroll. You need real Android with Firefox or Iphone with Chrome to see what I mean.

Until there’s better solution I am forced to use position: fixed on body and scroll the inner wrapper instead, which keeps the addressbar always there.

@Contente - thanks for the hint, but if you look at MDN, scroll-behavior property does not affect scroll performed by user, so it doesn’t really help here.

#5

Hi @Luk_Puk,

Thank you for the details and the possible solution.

Unfortunately, I’m still is unable to reproduce the issue.
I tested it in iPhone 6s Max, Chrome/Safari/Firefox/Edge, but the scrolling continuing after the address bar is hiding(firefox-edge) or moving top(safari-chrome).

The kinetic scroll really could not work in complex views, as “timeline” where the scheduler redefines the scroll and there is no way to fix it.
Additional rerendering during the scroll process also can stop the scroll process, and unfortunately, there is no way to change this behavior.

1 Like