touchOverflowEnabled and ui-field-contain #2956

siroman opened this Issue Nov 7, 2011 · 9 comments


None yet

6 participants

siroman commented Nov 7, 2011

I'm experiencing a strange issue when enabling "touchOverflowEnabled": when enabled the ui-field-contain elements don't go full with any more. See these images for examples:

the scroll effect when enabling touchOverflowEnabled is awsome!


To force iOS5 to render elements within the scrolling regions, we tack on a translate-z rule. This works, but makes all element relative which can cause odd CSS things to happen. Did you write any custom styles here or are these "stock" pages?

Can you make a test page using this template?

mischah commented Nov 13, 2011

I’ve done a minimal example on jsfiddle.


The List using the full width of the browser window in any dektop webkit browser.
But in Safari on iOS 5 the List only takes about 75% and is only scrollable in that area.


The page looks really wide on my iPhone. Viewing the source, it looks like you have the meta viewport tag commented out so can you do one that sets initial zoom to 1?

mischah commented Nov 15, 2011

Sorry, thats seems to be a problem with jsfiddle.

I just did the update to jQuery Mobile RC3 and the problem still exists.

Now I’ve set up a demo on GitHub:

dy77 commented Nov 19, 2011

I seem to be having the same issue. I turned on touchOverflowEnabled because it does improve the page transition experience greatly, but now my form elements aren't full width anymore. What's strange is that as you load more pages, the width shrinks more and more. 100%->75%->50%->25%

If I'm not mistaken, issue 2715 is the same? (#2716) and has been around since October.

Hopefully there's a fix on its way!

dy77 commented Nov 19, 2011

Just an update, I had data-position="fixed" in my header, and after removing that, the problem went away for me...

@Wilto Wilto was assigned Dec 15, 2011
zscgeek commented Dec 19, 2011

I have had the same problem - it seems the controls are rendered with the width of the widest set of text on the page -

To force it to render "correctly" you can make sure you have a decent sized body of text somewhere. (uber ugly). I will have to try the data-position thing and see if that by any chance works as a workaround for us.

mischah commented Dec 19, 2011

This issue should be fixed with jQuery Mobile 1.1. See the following Tweet:!/jquerymobile/status/148782245308669952


Hi all - since we've decided to deprecate touchOverflow in 1.1, I'm going to close related issues as won't fix since we're not going to spend cycles refining this. The new transitions and fixed header give us similar performance without the CSS oddities.

@toddparker toddparker closed this Feb 22, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment