Problem with -webkit-overflow-scrolling: touch

Create apps and expand their capabilities by using the world's popular programming language: Javascript.

Save time, resources and money creating apps for Android, iOS and more with the same base of code.

Take a look at our YouTube channel and subscribe to be notified about new videos!

Create modern HTML apps and games at another level making things impossible to do even by modern HTML apps and games.

Compile, convert your modern HTML apps and games into Microsoft Windows executable programs without dependencies.

Create multiplatform apps with DecSoft App Builder, including Android and iOS with the same base of code.

DecSoft App Builder integrates an Open AI assistant in order to assist you while developing your apps.

DecSoft App Builder include a convenient Command Line Compiler, so you can compile your apps from the console.

Design for small screen devices but deploy also (without changes) in larger devices like tablets.

DecSoft NeoPlugins are available in both runtime and designtime flavours to keep your apps as small as possible.

Save money by purchasing our NeoPlugins bundles. Five, Ten and even the complete NeoPlugins collection at an incredible price!

DecSoft NeoPlugins put your VisualNeo projects into another level with +1,000 new actions for your apps.

DecSoft HTML Compiler is easy to use: set your project's options and compile your apps and games in a nutshell.

Apache Cordova's official plugins are supported out of the box and there are hundreds of plugins ready to use.

DecSoft HTML Compiler include a convenient Command Line Compiler, so you can compile your apps from the console.

Take a look at some frequently asked questions about us and our products!

Harald Schneider

I have a strange problem getting the smooth scrolling on iOS working properly.

When I load a view with a long text in a HTML control, I can scroll smoothly directly after the view shows up. After approx 1 second, the scroll position jumps to the top and the touch scrolling effect stops working.

All content is enclosed with this wrapper:

.wrapper {
  width: 100vw;
  margin-top: 20px;
  padding-bottom: 100px;
  padding-left: 0px !important;
  padding-right: 0px !important;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch !important; 
}

Any hints ?

DecSoft

Hello Harald,

Probably a sample of what you are doing is required here. I am not sure what the "wrapper" is, for example. My recomendation, however, is that you use an HTML control to place more or less larger text or content. If we place an HTML control, and set their CSS "overflow-y" to "auto", then the scroll appear automatically. Maybe you can apply the "-webkit-overflow-scrolling" rule to that HTML control, but maybe this is not really required... at least I don't remember to use it,... but I use in certain app various Reports and HTML controls in the described way, without problems.

Purchase one or more licenses of our products if they are useful to you!

DecSoft

Hello Harald,

More information about this... I remember now... and check it... that the HTML and Report controls already uses the "-webkit-overflow-scrolling: touch"... AB defines a CSS class named "ios-inertial-scroll", and, it's automatically assigned to HTML and Report controls.

Purchase one or more licenses of our products if they are useful to you!

Harald Schneider

Hi Davide

For some reason, the touch scrolling seems to be applied and then removed after a second. Maybe some Angular event mechanism does something behind the scene ...

I will send you the project by mail - maybe you can reproduce it. I already removed my custom CSS an all JS code, but it makes no difference.

DecSoft

Hello Harald,

I don't bet for Angular here... but the point is what kind of content its shown... I don't know... what I can say is that I have an iOS app which uses HTML and Report controls by just the "overflow-y" in "auto", and, the referred CSS rule for iOS... and there work as expected... Anyway, send the me a sample of the possible issue and I will try to take a look.

Purchase one or more licenses of our products if they are useful to you!

Harald Schneider

Just sent it. Thanks !

DecSoft

Hello Harald,

I want to take a look at the sample when possible. I already send to you another sample, and, want to place it here too, so other interested user can try it in AB if he wanted.

<?xml version="1.0" encoding="utf-8"?>
<AppBuilder Version="2019.29">
  <App>
    <ID>com.appbuilder</ID>
    <Name>New App 1</Name>
    <ShortName>New App 1</ShortName>
    <Version>1.0.0</Version>
    <Icon></Icon>
    <Width>320</Width>
    <Height>480</Height>
    <Scale>1</Scale>
    <Zoom>1</Zoom>
    <Theme>Default</Theme>
    <Themes></Themes>
    <Plugins></Plugins>
    <Description>Another App Builder app</Description>
    <AuthorName>App Builder</AuthorName>
    <AuthorUrl>https://www.decsoftutils.com/</AuthorUrl>
    <AuthorEmail>info@decsoftutils.com</AuthorEmail>
    <LanguageCode>en</LanguageCode>
    <TextDirection>ltr</TextDirection>
    <Created>2019-04-17T16:55:09.164</Created>
    <Modified>2019-04-17T16:57:04.754</Modified>
    <BuildNumber>0</BuildNumber>
    <AutoBuildNumber>0</AutoBuildNumber>
    <Metadata />
    <Webapp />
    <ProWebApp />
    <WebExtension />
    <Cordova>
      <General />
      <Plugins />
      <Android />
      <IOS />
      <Windows />
      <Phonegap>
        <CLIVersion>8.0.0</CLIVersion>
      </Phonegap>
      <Platforms />
      <Splash />
      <Config />
      <Paths />
    </Cordova>
  </App>
  <Views>
    <View>
      <Name>Master</Name>
      <IsMaster>1</IsMaster>
      <Controls />
    </View>
    <View>
      <Name>View1</Name>
      <Controls>
        <Control Role="6001">
          <Name>HtmlContent1</Name>
          <Top>8</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>400</Height>
          <Style>overflow-y: auto; </Style>
          <Html>
            <![CDATA[<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel nulla vitae est dictum blandit non at turpis. In pellentesque erat nec diam efficitur, at pellentesque massa rhoncus. Fusce eget lacus libero. Duis eleifend ullamcorper elementum. Nam placerat gravida vehicula. Sed et aliquam metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu eleifend quam. Ut ullamcorper nisl id mi finibus, in suscipit enim finibus. Cras vitae odio quis lectus ullamcorper mollis. Proin sed erat sodales, sollicitudin leo ac, tristique magna. Maecenas tempus eros eget felis lobortis, at ultricies quam gravida. Etiam nec feugiat mauris. Phasellus cursus massa in eros condimentum blandit. Sed imperdiet, erat quis sodales efficitur, orci odio feugiat tellus, vel ornare neque nulla eget velit. Nullam vitae lobortis enim.
</p>

<p>
In nec metus volutpat risus gravida efficitur eget id metus. Quisque pretium maximus varius. Pellentesque pulvinar elit orci, ac varius nisl bibendum sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at malesuada lacus. Maecenas vehicula nunc eu elit sollicitudin, a blandit nisi pulvinar. Praesent dolor nibh, accumsan in quam id, varius tempus nisi.
</p>

<p>
Ut dui odio, molestie ut massa in, finibus tempus lorem. Integer cursus, neque placerat tempus sollicitudin, tellus risus aliquam tortor, nec posuere sem dui a metus. Curabitur ornare purus non diam dictum, quis iaculis purus finibus. Curabitur lobortis venenatis accumsan. Integer eleifend tempus nunc et sagittis. Suspendisse mollis sit amet quam eget efficitur. Curabitur dapibus purus mauris, ac gravida elit ullamcorper vitae. Integer quam ligula, lacinia vel orci id, dignissim interdum libero. Nam vitae nunc lorem. Duis gravida sed purus vel efficitur. Integer semper efficitur posuere. Donec pharetra dapibus ipsum varius aliquam. Morbi sed lectus ut dolor porta porttitor. Praesent commodo eget nunc vel auctor. Phasellus laoreet tellus ut dolor imperdiet, sollicitudin viverra ante tempus. Nulla feugiat eleifend urna a rhoncus.
</p>

<p>
Aenean commodo quis metus id imperdiet. Vivamus sagittis mollis risus, in condimentum dolor finibus at. Nulla aliquam id augue nec egestas. Maecenas porttitor vitae leo et vestibulum. Vestibulum eu condimentum velit. Ut in lectus auctor, malesuada tellus ac, consectetur diam. Cras accumsan gravida ultrices. Nam varius libero id quam varius tincidunt. Quisque diam mi, dignissim sed vehicula id, pretium nec leo. Sed mattis mi varius pulvinar tincidunt. Donec hendrerit augue nisi, at commodo nibh malesuada vel. Nullam non augue libero.
</p>]]>
          </Html>
        </Control>
        <Control Role="2001">
          <Name>Button1</Name>
          <Top>424</Top>
          <Left>8</Left>
          <Width>120</Width>
          <Height>40</Height>
          <Text>
            <![CDATA[Button One]]>
          </Text>
          <Kind>danger</Kind>
          <TabIndex>0</TabIndex>
        </Control>
        <Control Role="2001">
          <Name>Button2</Name>
          <Top>424</Top>
          <Left>192</Left>
          <Width>120</Width>
          <Height>40</Height>
          <Text>
            <![CDATA[Button two]]>
          </Text>
          <Kind>primary</Kind>
          <TabIndex>0</TabIndex>
        </Control>
      </Controls>
    </View>
  </Views>
  <Functions />
  <Files>
    <Styles />
    <Scripts />
    <Folders />
    <Images />
    <Others />
  </Files>
  <Generator>
    <Name>App Builder</Name>
    <Version>2019.29 (4/17/2019)</Version>
    <Email>mailto:info@decsoftutils.com</Email>
    <Website>https://www.decsoftutils.com/</Website>
    <Copyright>©2019 App Builder by DecSoft</Copyright>
  </Generator>
</AppBuilder>

Copy the above XML into a file and save it as "MyApp.ab". Open this file with AB and just run it.

Purchase one or more licenses of our products if they are useful to you!

Harald Schneider

Hi.

splitting the divs into separate HTML controls unfortunately made no difference.

I think I ran into some strange Cordova, Webkit or XCode bug in conjunction with nested divs or some CSS code:

The same code runs perfectly as a PWA on the iPhone. As soon as I run it as a native app the problem reappears ... :-/

DecSoft

Hello Harald,

You refer to your sample or to my sample? Take my sample also as a possible workaround... because as I told you before (via E-Mail?) probably it's the CSS that you are using in your sample who can cause the issue. In other words, if you see my sample working, maybe it's because it's quite more simple, but, since it works (at least we don't receive any complain), maybe you can adapt your content to it... that is... using my sample approach... in order to do what you want to do, instead to try to use the other way.

Anyway I want to take a look when possible to your sample in an iOS emulator (it's all what I can do... since I don't have an iOS device right now) and maybe see it with my own eyes give me another idea or something...

Purchase one or more licenses of our products if they are useful to you!

Harald Schneider

Its about my sample, yours works perfectly out of the box. I thinks you hit the point: It is the complexity of nested DIVs and / or some CSS problem.

You can save your time, because my code also runs perfectly in the simulator. The prob only appears on the hardware.

Thanks for pointing to the right direction!

Harald Schneider

I was able to find and kill this nasty, ugly, time eating bug :-)

The problem wasn't a Cordova, Webkit, CSS nor a nested DIV issue. It was this string:

Telefon: 06861 792145

Why did that happen?

The super-duper smart iPhone translates phone numbers in dial-able phone URLs. This happens approx. 1 sec after the page loaded, interrupts the touch scrolling and obviously blows away the CSS code, which causes a normal scrolling instead of fast and smooth touch scrolling.

The solution: Use phone URLs by default:

<a href="tel:49-6861-792145">06861 792145</a>

DecSoft

OMG... thanks very much to post it here, Harald... may can help to someone in the future!

Purchase one or more licenses of our products if they are useful to you!

Everybody can read the DecSoft support forum for learning purposes, however only DecSoft customers can post new threads. Purchase one or more licenses of some DecSoft products in order to give this and other benefits.