IOS orientation Change fixed header not resizing #3956

Closed
webdpro opened this Issue Apr 3, 2012 · 43 comments

Comments

Projects
None yet
@webdpro

webdpro commented Apr 3, 2012

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

This comment has been minimized.

Show comment
Hide comment
@webdpro

webdpro Apr 10, 2012

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.

webdpro commented Apr 10, 2012

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

This comment has been minimized.

Show comment
Hide comment
@juleq

juleq Apr 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.

juleq commented Apr 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.

@webdpro

This comment has been minimized.

Show comment
Hide comment
@webdpro

webdpro Apr 12, 2012

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 .

webdpro commented Apr 12, 2012

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

This comment has been minimized.

Show comment
Hide comment
@zSprawl

zSprawl Apr 22, 2012

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

zSprawl commented Apr 22, 2012

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

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker May 16, 2012

Contributor

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

Contributor

toddparker commented May 16, 2012

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

@triwav

This comment has been minimized.

Show comment
Hide comment
@triwav

triwav Jun 13, 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.

triwav commented Jun 13, 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.

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 13, 2012

Member

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.

Member

jaspermdegroot commented Jun 13, 2012

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

This comment has been minimized.

Show comment
Hide comment
@triwav

triwav Jun 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.

triwav commented Jun 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.

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 13, 2012

Member

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.

Member

jaspermdegroot commented Jun 13, 2012

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

This comment has been minimized.

Show comment
Hide comment
@triwav

triwav Jun 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.

triwav commented Jun 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.

@ghost ghost assigned jaspermdegroot Jun 13, 2012

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 14, 2012

Member

@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

Member

jaspermdegroot commented Jun 14, 2012

@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

This comment has been minimized.

Show comment
Hide comment
@triwav

triwav Jun 14, 2012

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

triwav commented Jun 14, 2012

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

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 16, 2012

Member

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

Member

jaspermdegroot commented Jun 16, 2012

@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

This comment has been minimized.

Show comment
Hide comment
@juleq

juleq Jun 16, 2012

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)

juleq commented Jun 16, 2012

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

This comment has been minimized.

Show comment
Hide comment
@triwav

triwav Jun 16, 2012

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)

triwav commented Jun 16, 2012

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jul 16, 2012

Member

I closed #2518 as duplicate of this issue.

Member

jaspermdegroot commented Jul 16, 2012

I closed #2518 as duplicate of this issue.

@jwillemsend

This comment has been minimized.

Show comment
Hide comment
@jwillemsend

jwillemsend Jul 27, 2012

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?

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

This comment has been minimized.

Show comment
Hide comment
@annebosman

annebosman Aug 8, 2012

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.

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

This comment has been minimized.

Show comment
Hide comment
@ierror

ierror Aug 21, 2012

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

ierror commented Aug 21, 2012

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

@juleq

This comment has been minimized.

Show comment
Hide comment
@juleq

juleq Aug 21, 2012

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/jquery/jquery-mobile/issues/3956#issuecomment-7903568.

juleq commented Aug 21, 2012

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/jquery/jquery-mobile/issues/3956#issuecomment-7903568.

@BeerSmith

This comment has been minimized.

Show comment
Hide comment
@BeerSmith

BeerSmith Sep 5, 2012

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()

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

This comment has been minimized.

Show comment
Hide comment
@davidhooey

davidhooey Sep 5, 2012

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.

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

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Sep 12, 2012

Contributor

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.

Contributor

toddparker commented Sep 12, 2012

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

This comment has been minimized.

Show comment
Hide comment
@marcustorres

marcustorres Sep 13, 2012

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

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

@BeerSmith

This comment has been minimized.

Show comment
Hide comment
@BeerSmith

BeerSmith Sep 13, 2012

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.

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

This comment has been minimized.

Show comment
Hide comment
@davidhooey

davidhooey Sep 13, 2012

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

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

This comment has been minimized.

Show comment
Hide comment
@marcustorres

marcustorres Sep 13, 2012

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.

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

This comment has been minimized.

Show comment
Hide comment
@tpalomo

tpalomo Oct 15, 2012

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-

tpalomo commented Oct 15, 2012

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Feb 10, 2013

Member

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.

Member

jaspermdegroot commented Feb 10, 2013

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

This comment has been minimized.

Show comment
Hide comment
@applegrew

applegrew Jul 8, 2013

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.

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jul 15, 2013

Member

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!

Member

jaspermdegroot commented Jul 15, 2013

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

This comment has been minimized.

Show comment
Hide comment
@anthonyac

anthonyac Jul 15, 2013

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

@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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jul 15, 2013

Member

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

Member

jaspermdegroot commented Jul 15, 2013

@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

This comment has been minimized.

Show comment
Hide comment
@DzenisevichK

DzenisevichK Jan 15, 2014

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?

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

This comment has been minimized.

Show comment
Hide comment
@DzenisevichK

DzenisevichK Jan 15, 2014

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());
    }
});

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

This comment has been minimized.

Show comment
Hide comment
@DzenisevichK

This comment has been minimized.

Show comment
Hide comment
@DzenisevichK

DzenisevichK Jan 16, 2014

@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

@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

This comment has been minimized.

Show comment
Hide comment
@Ruffio

Ruffio Apr 17, 2014

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.

Ruffio commented Apr 17, 2014

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

This comment has been minimized.

Show comment
Hide comment
@DzenisevichK

DzenisevichK Apr 18, 2014

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

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

@Ruffio

This comment has been minimized.

Show comment
Hide comment
@Ruffio

Ruffio Jun 11, 2014

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

Ruffio commented Jun 11, 2014

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

@Ruffio

This comment has been minimized.

Show comment
Hide comment
@Ruffio

Ruffio Sep 24, 2014

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

Ruffio commented Sep 24, 2014

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

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Sep 25, 2014

Member

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

Member

arschmitz commented Sep 25, 2014

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

@apsdehal

This comment has been minimized.

Show comment
Hide comment
@apsdehal

apsdehal Jun 20, 2016

Member

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.
bs_realios_mobile_iphone 6-8 0

Member

apsdehal commented Jun 20, 2016

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.
bs_realios_mobile_iphone 6-8 0

@apsdehal apsdehal closed this Jun 20, 2016

@apsdehal apsdehal self-assigned this Aug 3, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment