IOS orientation Change fixed header not resizing

[webdpro]

On IOS when viewing the rc1 and nightly with fixed header the orientation change both fixed header and footer do no expand after orientation. They will change a few second after or if you move the screen but it make it look kind of sloppy.

I tested it on a new ipod with the RC1.1 demo code and the nightlies same result.

[webdpro]

In testing this seems to only happen when there is an ul li on the page. I am in the process of trying to narrow it down fully but the ul li does not seem to be the problem more having to do with the css.

I have recreated the css and made a custom ul li listing component and the change works but when I start to add more styles its failing, not sure just yet but will post back when I find the problem line.

[juleq]

I can confirm this issue using 1.1.0 RC2. However, (at least for me) I cannot narrow it down to pages containing ul li.

I have eight single page templates in my project, four of which show this issue. The contents of the affected pages is as follows:

• page with ul li that is being populated asynchronously with an RSS feed
• page with OSM map that is bound to 'resize' and 'orientationchange' to circumvent the jQm content div height behaviour
• page containing a simple form (two selects, one button)
• page containing a simple form (two text inputs, one checkbox, one textarea)

Unfortunately I have no time to do minimals for reproducing the error right now.

[webdpro]

Because of time and needing to submit to the app store I just bound to the resize event and then got that width and changed the header and footer accordingly.

That seems to work in both IOS and Android, oddly enough though Android did not like it when I bound to the orientation change and tried to resize, although android did not have the same issue as IOS and seemed to resize correctly.

After doing more research on it I found that it was not so much the LI and UL that was the issue but the width of the page elements.

So for example if my LI had content that was long enough then the resize worked just fine but if the LI was not long enough it would crap out and not cover the top of the page on the change but doing a small movement causes a trigger to resize the header. I tried a tone of different things but the only thing that worked was resize .

[zSprawl]

I have the same problem with 1.1 final and a simple list.

[toddparker]

Can someone post up a test page using latest so we can give this a look? Template: http://jsbin.com/ivawuc/edit

[triwav]

Not sure if this is the exact same issue but it's most likely related. I'm working on a web app for our photography website and am noticing the same issue where when I rotate on an iPhone 4 with 5.1.1 on it that it does not expand without scrolling down on the page and then fixes itself. Two points at least in my case that my help tie down the problem. #1 this does not happen in safari. It only happens in standalone mode. #2 this also only happens on the first page that's loaded and not on subsequent ajax loaded pages. My mobile app is located here:
app.leightyphotography.com
if anyone wants to test it out.

[jaspermdegroot]

Just had a quick look at app.leightyphotography.com and noticed the issue again where content div comes before header on subsequent ajax loaded pages. Note that this app loads 1.1.0, not latest code.

[triwav]

So you're saying it's doing it to you on subsequent pages as well? Or are you saying on subsequent pages the content div comes before the header and that's what causes it to work? I'm too familiar with the differences between 1.1.0 and latest. My thought was 1.1.0 is the latest released option. Is latest just for developers so it contains so called BETA, ALPHA or RC versions of 1.1.1? I'm more than happy to switch over to latest for testing but do not want it to create new issues. Thanks.

[jaspermdegroot]

hi @triwav

Sorry for the confusion. My comment was more a note to other team members.

When looking at other issues with fixed toolbars we noticed this re-order of header and content. I am not saying that this is what causes the "not resizing" issue, but it could mean there is a relation with other issues. Just something we have to look into.

With "latest" I refer to the code as it is right now, not latest/current stable release (1.1.0 at the moment). This is what should be used for test pages because maybe an issue has been fixed already or changes have been made that affect the issue.

It would be very helpful if you could provide a simple test page that reproduces the issue, using our JSBin template that loads latest code. You can find it here: https://github.com/jquery/jquery-mobile#issues

Thanks!

Edit: I forget to mention that I don't have an iPhone 4 here to test on so I can't confirm the issue.

[triwav]

Alright, I've built a test page based off that template. The main changes are adding to the head. Making the header fixed and using a listview instead of the content that is given in the template. As I said before, it doesn't show up in safari only in standalone mode. Go to http://app.leightyphotography.com/headerTest2 add it to the homescreen and run it from there. Changing to landscape causes the header not to change size. One other thing I noted is if I remove some list items so that it doesn't completely fill the screen then everything is fine as well.

[jaspermdegroot]

@triwav - Can you try this http://jsbin.com/otepum/92/ on your iPhone and let me know if you see any improvement?

FYI - this template only contains first page so I removed the links from the list

[triwav]

Just tried it and it's still got the issue.

[jaspermdegroot]

@triwav

I made the test page load this script: https://github.com/scottjehl/iOS-Orientationchange-Fix
Just to see if it is the "iOS zoom bug" that is causing your issue.
Can you test again? http://jsbin.com/otepum/101/
Thanks!

[juleq]

The problem persists with your test case so I assume we can rule that out.

I also use the 1.1.0 release and have reported this bug before. My app
is already in production as is. Thank you for looking into this.

Am 16.06.2012 um 10:33 schrieb Jasper de Groot
reply@reply.github.com:

@triwav

I made the test page load this script: https://github.com/scottjehl/iOS-Orientationchange-Fix
Just to see if it is the "iOS zoom bug" that is causing your issue.
Can you test again? http://jsbin.com/otepum/101/
Thanks!

---

Reply to this email directly or view it on GitHub:
#3956 (comment)

[triwav]

That still didn't work. Same issue.

On Jun 16, 2012, at 4:33 AM, Jasper de Groot reply@reply.github.com wrote:

@triwav

I made the test page load this script: https://github.com/scottjehl/iOS-Orientationchange-Fix
Just to see if it is the "iOS zoom bug" that is causing your issue.
Can you test again? http://jsbin.com/otepum/101/
Thanks!

---

Reply to this email directly or view it on GitHub:
#3956 (comment)

[jaspermdegroot]

I closed #2518 as duplicate of this issue.

[jwillemsend]

Any news on the issue? I still have the problem as well: using jquery mobile 1.1.1.
Even the scrolling of istrasoft does not resolve this issue for me :(... Are there any other stop-gap fixes for now?

[annebosman]

I have the same problem. It doesn't appear when trying my app in the browser. It only happens on a few pages, though the html/css of the header/footer is the same.

I found out it only happens when my content is to large for the screen and you need to scroll, pages without scroll work fine.

[ierror]

FYI: In jQuery Mobile 1.2.0 Alpha the problem is still present.

[juleq]

The beta of the next version of a popular OS for mobile phones does not
seem to show this issue anymore.

However, my initial view is now missing the header logo and a textless
"forward" button (default icon) in the footer is now missing its border
circle. After the first redraw (e.g. due to rotating the device or
scrolling) these issues are gone again.

I still refer to jQm 1.1.0. My gutt feeling on both of these errors is that
this might be due to a event race condition that jQm shows when executed
within the headless WebKit engine on the affected OS. But I am not into
this so feel free to ignore my verbose gutt :).

Am 21.08.2012 um 16:54 schrieb "B." notifications@github.com:

FYI: In jQuery Mobile 1.2.0 Alpha the problem is still present.

—
Reply to this email directly or view it on
GitHubhttps://github.com//issues/3956#issuecomment-7903568.

[BeerSmith]

Adding this (forcing resize of headers) at the top of your javascript worked for me. This fixes headers. If you are using footers you need to have a width line and selector for the footer class as well.

            $(window).resize(function() { 
                             $(".ui-header").width($(window).width());
                             });

NOTE: (edited) - This code needs to be included AFTER jquery and phonegap have initialized - for example in your OnDeviceReady()

[davidhooey]

I believe I'm seeing the same thing using PhoneGap 2.0.0 and jQuery Mobile 1.1.1. I do not see the issue in the emulators. I have added the HTML portion of the code to http://jsfiddle.net/davidhooey/gRhwN/. I am unable to reproduce pointing a mobile device to this jsfiddle. When switching to landscape mode the header and footer do not expand to the right. After scrolling the text down a bit it will re-adjust. After the initial adjustment it seems to do fine until I go away from the page and come back.

[toddparker]

We do have a fix to temporarily disable zoom on iOS to workaround the zoom bug. Wondering if that timing is sometimes breaking the re-flow.

[marcustorres]

Unfortunately I am seeing the same exact issue as davidhooey and the force resize by BeerSmith is not correcting the issue

[BeerSmith]

Make sure you add my script (above) after everything has been initialized - it won't work if you just put it in the HTML file. It needs to run after JQuery and phonegap have been fully loaded.

[davidhooey]

Thanks for the clarification BeerSmith. Your code worked for me. For specifics, I placed the code in the myApp.js within the onDeviceReady() function.

[marcustorres]

That did the trick, thanks!

On Sep 12, 2012, at 7:41 PM, Brad Smith notifications@github.com wrote:

Make sure you add my script (above) after everything has been initialized - it won't work if you just put it in the HTML file. It needs to run after JQuery and phonegap have been fully loaded.

—
Reply to this email directly or view it on GitHub.

[tpalomo]

I've gone through all the test pages that are present on this bug on iOS5.1.1 & iOS6 and have not replicated the issue successfully. On the first, the header doesn't resize until redraw is complete (after the page completes the rotation), but it does resize successfully after that. All the others seem to maintain the correct size the entire time.
Closing this bug. If more problems arise, please reopen with specific version numbers / conditions and a jsbin to corroborate.

Thanks,
-tomas-

[jaspermdegroot]

Re-opening because this it still seems to be an issue (see #5620).
I think we have to look into the timing of the fix for the iOS orientation change bug as @toddparker already mentioned.

[applegrew]

FYI... I faced this issue on recent 1.3.1 version on Android device. However, in my case it turned out that this happened only when I minified the jquery.mobile.structure.css using YUI. When I replaced that with official minified version, it worked! However, I am still minifying the custom theme css and my css files with YU.

[jaspermdegroot]

I just tested this with latest code on iPad Retina, iOS 6.1, Safari, Chrome and webview and can't reproduce the issue anymore. Test page: http://jsbin.com/otepum/372

@arschmitz - Can you test on iPhone 4? Thanks!

[anthonyac]

@uGoMobi, I have tested your latest jsbin page on an iPhone 4S, iOS 5.1, from the homescreen.

The issue remains with the above combination, the header does not resize on changing orientation from portrait to landscape, and only resizes when scrolling the page.

[jaspermdegroot]

@anthonyac - Thanks a lot for testing!

Too bad the changes we made so far didn't fix it yet. We keep looking into a solution.

[DzenisevichK]

Additional test page to reproduce (only in homescreen mode) problem:
http://jsbin.com/unIfIwIh/8/
that based on http://view.jquerymobile.com/master/demos/toolbar-fixed/
but with

  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="apple-touch-fullscreen" content="yes" />

Why don't invoke toolbar.updatePagePadding on orientationchange event?

[DzenisevichK]

toolbar.updatePagePadding on orientationchange event doesn't work but
$window.scrollTop($window.scrollTop()); on orientationchange event works!

$.widget("mobile.toolbar", $.mobile.toolbar, {
    _makeFixed: function () {
        this._super();
        this._bindOrientationEvent();
    },

    _bindOrientationEvent: function () {
        this._on(window, {
            "orientationchange": "_fixPosition"
        });
    },

    _fixPosition: function () {
        var $window = $(window);
        $window.scrollTop($window.scrollTop());
    }
});

[DzenisevichK]

Fixed example:
http://jsbin.com/unIfIwIh/10

[DzenisevichK]

@uGoMobi

Better to move this fix from toolbar to orientation widget:

var $window = $(window);
$window.bind("orientationchange", function () {
    $window.scrollTop($window.scrollTop());
});

Steps to reproduce problem:

• Open http://jsbin.com/unIfIwIh/8/ page with iPhone (iOS 7.0.4),
• Add to home screen,
• Open from home screen,
• Scroll at middle of page,
• Rotate to another orientation mode - Header will be missing or on center (incorrect position).

And try repeat the same with orientation fix http://jsbin.com/unIfIwIh/11

[Ruffio]

Will this only scroll the complete page to the top? Not the content? So when you rotate from the bottom of a long page, you will not end up at the top? Any scrolling away from the 'current' position in page is not desirable.

[DzenisevichK]

@Ruffio
$window.scrollTop($window.scrollTop());
just re-set the same top offset so 'current' position in page is remained.

[Ruffio]

Does this issue only wait for a PR? Who should make the PR?

[Ruffio]

Would it be an idea to include this in the 1.4.5 ios release? It is high priority since 2012 and there seems to be found a solution...

[arschmitz]

@Ruffio Pr's are welcome on any issue though of course there is no guarantee they will be accepted.

[apsdehal]

I have tested this iOS 8, which is the minimum version we support now with version 1.5 and this appears no longer to be an issue. Closing accordingly.