Possible conflict between jQuery and regular javascript
There is a well-known issue with a "scaling bug" affecting certain mobile devices, including iPad and iPhone, wherein a web page will zoom in more and more, when the device is rotated from portrait to landscape orientation, and back again. A javascript fix for this has been developed, and it is described at https://gist.github.com/mathiasbynens/901295
I've used the code from that author, placing it in an external file named MaintainViewport.js, and it is working well at http://mauitradewinds.com/test/view.htm That page has a horizontally-scrolling image with a static text caption, and no jQuery.
Now I have made some changes to that page, adding a jQuery script which causes the caption text to fade into different text. Unfortunately, those changes have somehow interfered with the scaling bug fix, and the fix isn't working on the modified page, at http://mauitradewinds.com/test/test.htm
If I remove the reference to jQuery in the modified page, the scaling bug is also removed. I'd be grateful if an Expert could guide me to a resolution which allows for the jQuery caption effect to coexist with the scaling bug javascript fix. Alternatively, it might work if the jQuery caption call-back could be accomplished without reference to jquery.min.js.
I've used the code from that author, placing it in an external file named MaintainViewport.js, and it is working well at http://mauitradewinds.com/test/view.htm That page has a horizontally-scrolling image with a static text caption, and no jQuery.
Now I have made some changes to that page, adding a jQuery script which causes the caption text to fade into different text. Unfortunately, those changes have somehow interfered with the scaling bug fix, and the fix isn't working on the modified page, at http://mauitradewinds.com/test/test.htm
If I remove the reference to jQuery in the modified page, the scaling bug is also removed. I'd be grateful if an Expert could guide me to a resolution which allows for the jQuery caption effect to coexist with the scaling bug javascript fix. Alternatively, it might work if the jQuery caption call-back could be accomplished without reference to jquery.min.js.
ASKER CERTIFIED SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
Ah, sorry about that. I don't have such a device to test on and was counting on a conflict with jQuery to be the culprit. Have you tried removing any other scripts/styles to see if they could be the cause of a conflict? The callback is pretty simple so I can't see how that is causing a conflict unless it's the fading itself. In that case of course you would be right and disabling the fading for those devices would be the only solution.
Did you see this alternative in the comments on that github page: https://github.com/sergiolopes/ios-zoom-bug-fix (and further down a link to a CSS only solution)
Did you see this alternative in the comments on that github page: https://github.com/sergiolopes/ios-zoom-bug-fix (and further down a link to a CSS only solution)
ASKER
I overlooked the CSS zoom bug fix, and will test it ASAP. I haven't removed other scripts and styles, because everything works until there is a fading caption. In one previous script, the last fading caption fades out and isn't replaced with a new caption. Once the last caption fades out, the zoom bug no longer occurs on iPad or iPhone. So I'm pretty convinced about the cause, although I don't understand how that cause produces the observed effect.
You've been very generous with your time and expertise. I'll try to remember to post back after testing the CSS fix.
You've been very generous with your time and expertise. I'll try to remember to post back after testing the CSS fix.
ASKER
I created a page with a fading caption and a fixed image -- no scroller -- and installed the CSS bug fix. The bug fix works -- provided that MaintainViewport.js is also invoked.
However, intentional scaling activates the scaling bug, contrary to what is stated by the author of the CSS bug fix.
I haven't been able to reproduce this success with the scrolling image. There is no initial scaling bug, but the image height is excessive in portrait mode.
It's still a work in progress...
However, intentional scaling activates the scaling bug, contrary to what is stated by the author of the CSS bug fix.
I haven't been able to reproduce this success with the scrolling image. There is no initial scaling bug, but the image height is excessive in portrait mode.
It's still a work in progress...
ASKER