scrolling issue with -webkit-overflow-scrolling:touch

Question

I am using Phonegap 2.5 for the iPhone application.I am also using query mobile. Its giving scrolling issue when I use -webkit-overflow-scrolling: touch;

Here are the screenshots:

enter image description here

and after scrolling content disappears:

enter image description here

Header and footer are fixed. this is the code I am using for the div which is scrolling div:

<div style="position: absolute; width: 100%; height: 75%; margin-top: 10%; overflow-y: auto; -webkit-overflow-scrolling: touch; -webkit-transform: translate3d(0,0,0);">
    <!--some content -->
</div>

when I remove -webkit-overflow-scrolling: touch; the content doesn't disappear but it doesn't scroll like native. I can't figure it out what is the problem?

UPDATE: It works fine on ios 6 simulator. screenshots are of iOS 5 device.

Try out this: -webkit-transform: translateZ(0); Maybe it is somehow related to this problem: stackoverflow.com/q/8110580/1307609 — Zsolt
– Zsolt, Commented Jun 6, 2013 at 20:08

yeyene · Accepted Answer · 2013-06-06 08:07:00Z

1

Couldn't see your html markup though, try to call this script...

Give id to your popup div.

HTML

<div id="yourBox" style="">    
    <!--some content -->    
</div>

JQUERY

$(document).ready(function(){
    $('#yourBox').trigger("create");
});

answered Jun 6, 2013 at 8:07

yeyene

7,4001 gold badge24 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

scrolling issue with -webkit-overflow-scrolling:touch

1 Answer 1

HTML

JQUERY

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

HTML

JQUERY

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related