Scrolling of content does not work on iPhone

Webix JS
#1

Hi,

User reports that they cannot scroll content in an iframe element:

http://www.bauerapps.com/test/mobile.html

You can click through to User Guide → Boot Camp → Welcome

(This is using an older version: 3.2.2)

#2

Can you please specify the iPhone model / OS / browser ? According to our tests, the sample works

#3

iPhone 6 plus; iOS 11.2. Using Chrome browser or Safari.

#4

There was an issue with the older version of Webix (3.2.2 was released in early 2016), but right now it is fixed and, according to our tests, it works correctly now.

I suggest you consider the update and first of all, test your app on the latest Webix Trial version to make sure it works OK.

#5

I have uploaded a new demo that is using Webix 5.1.1, and the user reports there is still a problem:

new demo:
http://www.bauerapps.com/wb5/mobile.html

user report:
“The “Mobile” version, still doesn’t scroll properly on my iPhone. It does manage to scroll for just a few lines (which is a slight improvement), but then it stalls again.”
(You can click through to: User Guide → Boot Camp → Welcome)

#6

@RaelB try this hack

(function(_preventEvent){
    webix.html.preventEvent = function (e) {
        if ("touch"==e.type.substr(0, 5)) {
            return;
        }
        return _preventEvent.apply(this, arguments);
    }
}(webix.html.preventEvent));
#7

Where should I put this?

#8

at the very begin

#9

@Listopad: Hello. Please tell me which phone you have tested on, since I have got multiple reports of this not working on iPhone 6 and iPhone 7 (I tested on iPhone 7). I’m wondering how it can be working for you…

I paid a lot of money for the v3, and in the words of a user, without being able to scroll content, “the app is worthless”. I have tried using v5 (see link above), and the same problem occurs, so I have no reason to upgrade.

#10

@RaelB we have run additional tests and in fact, the issue depends on the style of the iframe and its content. There is a peculiarly in iOS for scrolling iframes, so to ensure that the scroll is enabled correctly, please try to use the following CSS on Webix iframe:

<style>
	.webix_view.frameTest {
		-webkit-overflow-scrolling: touch;
		overflow-y: scroll;
	}
</style>

Where frameTest class is declared at

{ 
	view:"iframe", src:"data/some.html",
	css:"frameTest"
}
#11

Thank you. That is very helpful. Now scrolling does work, but there are 2 problems:

  1. “the good news is that it definitely scrolls now. But when I hold the phone vertically, the text runs off the right side of the screen. When I shift the phone to a horizontal position and reduce the size of the text with a thumb-and-finger gesture, I can read all the text.”

Is it possible to get the text to scroll normally?

  1. If I view the page in a desktop browser there are 2 scrollbars visible.

[Link]
http://www.bauerapps.com/webbooks/notebooks/User%20Guide/mobile.html
Click on “Boot Camp” and then “Welcome”

#12

The problem is not Webix-specific, there are many similar issues with scrolling iframe content on iOS.
As far as I can see, solutions depend on specific use-cases. As an option, I would suggest you wrap above CSS notation in @media query and change scroll overflow value to auto :

		@media (pointer:coarse) {
			.webix_view.frameTest {
				-webkit-overflow-scrolling: touch;
  				overflow-y: auto;
			}
		}