iOS5/touchOverflowEnabled layout problems

[thomson02]

Hi Guys,

I've noticed an issue using the latest version of jQM. There seems to be layout problems when using iOS5 + touchOverflowEnabled = true. What i'm seeing is that the width of the page is calculated incorrectly and as a result the page is squeezed into ~75% width of the page.

From playing around with it, it seems to be a problem with divs marked with data-role="content". When i remove the data-role, i don't see the problem.

It is really easy to reproduce. Use the following body and initialise jQM + jQuery in the usual way (making sure to set touchOverflowEnabled = true). Disabling touchOverflowEnabled or removing data-role resolves the issue.

    <div id="index-page" data-role="page">

        <div data-role="header" data-position="fixed"><h2>Header</h2></div>

        <div id="content" data-role="content">
            <div class="ui-grid-b">
                <div class="ui-block-a">
                    <button>A</button>
                </div>
                <div class="ui-block-b">
                    <button>A</button>
                </div>
                <div class="ui-block-c">
                    <button>A</button>
                </div>
            </div>
        </div>

    </div>

Thanks,
Andrew

[MauriceG]

Hi!
Do you've tried a fixed header or footer? What happens to your layout?
Please take a look to issue #2716 and please try the links.
Which device do you use with iOS5?

[thomson02]

Yes, i am making use of a fixed header (see sample code above). It seems as though these two issues might be the same... or very similar.

Looking at the link that you posted, it looks like the width of your page has also been affected (i.e it's been changed to roughly 75%). Can you try removing data-role="content" from the div just after your header. Does this resolve the strange positioning for you? Doing this did the trick for the example in my initial post.

Thanks,
Andrew.

[MauriceG]

Sorry, i missed the data-position for the header in your code.
I've removed the data-role=content in the fiddle: http://jsfiddle.net/MauriceG/hY5Wq/28/

[thomson02]

Yup, it's the same issue i'm seeing...

When viewing your original URL (with data-role="content" present) on my iPhone i see strange positioning (width = ~75%)
http://jsfiddle.net/MauriceG/hY5Wq/embedded/result/

However, hitting the new URL (with data-role="content" removed) on my iPhone everything appears normal.
http://jsfiddle.net/MauriceG/hY5Wq/28/embedded/result/

Some great paired debugging! Now do you fancy resolving the issue yourself :P

Andrew.

[MauriceG]

So it seems this is the same as #2716 ...

[anpsince83]

I am also experiencing this issue on iPad2 with iOS5. For me, it is on pages that contain listviews. I have a couple of pages that have normal content without any jQM enhanced widgets and those pages are layed out and scroll just fine.

@MauriceG, I can confirm the issues in your fiddle are happening on the iPad2 as well. I tried your suggestion of removing the data-role="content" from the content div, that does solve the layout issue for me, but it causes the page to not scroll.

The more I play with the $.mobile.touchOverflowEnabled setting, the more I see it is definitely not ready for primetime.

[thomson02]

@anpsince83, I have also seen the problem with listviews as well. Unfortunately, i think you are right about $.mobile.touchOverflowEnabled. I was using iScroll4 but found that quite annoying... i thought $.mobile.touchOverflowEnabled had been the answer to all my prayers. But in the end, i would have been quicker just sticking with iScroll :(

[MauriceG]

@anpsince83
To remove the content-data-role was not my suggestion.
I've just removed it in the jsfiddle above, cause of a inquiry of @thomson02, so he was able to check his issue.
Removing the content-data-role is pointless. Contained listviews loses their layout etc. ...

[sbounmy]

Hi guys,

when using with iOS5 :

$.mobile.touchOverflowEnabled = true

and a footer navbar with data-id to avoid it to transition between ajax pages, the height of the navbar is incorrectly calculated resulting in a footer misplaced by 5-10px.

However I could not reproduce this :

• with a desktop browser
• when using a web app added as a home screen button.

I noticed in the setTop function that thisHeight doesnt have the same value when transition to the new ajax page.

    function setTop( el ) {
    var fromTop = $(window).scrollTop(),
        thisTop = getOffsetTop( el[ 0 ] ), // el.offset().top returns the wrong value on iPad iOS 3.2.1, call our workaround instead.
        thisCSStop = el.css( "top" ) == "auto" ? 0 : parseFloat(el.css( "top" )),
        screenHeight = window.innerHeight,
        thisHeight = el.outerHeight(),
        useRelative = el.parents( ".ui-page:not(.ui-page-fullscreen)" ).length,
        relval;

    if ( el.is( ".ui-header-fixed" ) ) {

        relval = fromTop - thisTop + thisCSStop;

        if ( relval < thisTop ) {
            relval = 0;
        }

        return el.css( "top", useRelative ? relval : fromTop );
    } else {
        // relval = -1 * (thisTop - (fromTop + screenHeight) + thisCSStop + thisHeight);
        // if ( relval > thisTop ) { relval = 0; }
        relval = fromTop + screenHeight - thisHeight - (thisTop - thisCSStop );

        return el.css( "top", useRelative ? relval : fromTop + screenHeight - thisHeight );
    }
}

[shazron]

#3165 seems to fix it for me (regarding the width issue)

[toddparker]

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.