Skip to content
This repository

IOS orientation Change fixed header not resizing #3956

Open
webdpro opened this Issue April 02, 2012 · 39 comments
Michael

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.

Michael

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
juleq commented April 12, 2012

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.

Michael

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 .

Stephen "zSprawl" Russell

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

Todd Parker

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

triwav commented June 12, 2012

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.

Jasper de Groot
Owner

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 commented June 13, 2012

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.

Jasper de Groot
Owner

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 commented June 13, 2012

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.

Jasper de Groot
Owner

@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 commented June 14, 2012

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

Jasper de Groot
Owner

@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
juleq commented June 16, 2012
triwav commented June 16, 2012
Jasper de Groot
Owner

I closed #2518 as duplicate of this issue.

Jeroen Willemsen

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.

B.

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

juleq
Brad Smith

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.

Todd Parker

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

Brad Smith

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
Tomas

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-

Jasper de Groot uGoMobi closed this October 15, 2012
Jasper de Groot
Owner

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.

Jasper de Groot uGoMobi reopened this February 10, 2013
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.

Jasper de Groot
Owner

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!

Anthony

@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.

Jasper de Groot
Owner

@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

@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

Rasmus Christiansen

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.