Problem with -webkit-overflow-scrolling: touch

Ahorre dinero comprando nuestros paquetes de NeoPlugins. ¡Cinco, Diez e incluso nuestra colección entera a un precio increíble!

¡Eche un vistazo a algunas de preguntas más frecuentes sobre nosotros y nuestros productos!

Los NeoPlugins de DecSoft tienen versiones "designtime" y "runtime" para reducir el tamaño de sus apps.

Ahorre tiempo, recursos y dinero creando apps para Android, iOS y más con la misma base de código.

Cree modernas apps y juegos HTML a otro nivel haciendo cosas que incluso las modernas apps y juegos HTML no pueden.

DecSoft HTML Compiler es fácil de usar: personalize su proyecto y compile sus apps y sus juegos rápidamente.

DecSoft HTML Compiler incluye un conveniente Compilador por línea de comandos para compilar sus apps desde la consola.

Diseñe para pantallas pequeñas y distribuya también (sin cambios) en dispositivos como tablets.

Cree apps y expanda sus capacidades usando el lenguaje más popular del mundo: Javascript.

Compile, convierta sus modernas apps y juegos HTML en programas ejecutables sin dependencias para Microsoft Windows.

DecSoft App Builder incluye un conveniente Compilador por línea de comandos para compilar sus apps desde la consola.

DecSoft NeoPlugins pone sus proyectos de VisualNeo en otro nivel con +1.000 nuevas acciones para sus apps.

DecSoft App Builder integra un asistente de Open AI para ayudarle mientras desarrolla sus apps.

Los plugins oficiales de Apache Cordova se incluyen de serie y hay cientos de ellos disponibles para su uso.

¡Eche un vistazo a nuestro canal de YouTube y suscríbase para recibir notificaciones sobre nuevos vídeos!

Cree apps multiplataforma con DecSoft App Builder, incluyendo Android e iOS, con la misma base de código.

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!

Todo el mundo puede leer el foro de soporte de DecSoft para aprender del mismo, sin embargo, sólo los clientes de DecSoft pueden abrir nuevos hilos. Compre una o más licencias de productos de DecSoft y obtendrá este y otros beneficios.