While developing a Jquery mobile based application, I came across a issue that is observed only on the iOS 6 devices and Android 4.2.2 devices.
What is the issue?
Web pages are side scrolling on iOS6 and Android 4.2.2 devices.
How did I debug the issue?
This bug was in our applications bug tracker for a long time and since I am the lone front-end developer the project that I am working on, my manger was pushing me to close this bug quickly. I had used the perfect mobile meta tag and still the web pages were side-scrolling. None of my divs had width that was going beyond the device widths and still there was this issue. That day, I decided to break down my HTML to pieces, and tested each piece on the dreadful iOS 6 device. I came down to a textbox that had some placeholder text in it and there it was, the issue was glaring me in my face.
Workaround
I reduced the width of the textbox with the placeholder from 100% to slightly less and then the web pages stopped side-scrolling. I checked for the issue across the web, but did not find any reports on this issue. I have now reported this issue on Jquery mobile github and you can check out the issue report at http://goo.gl/KNFBX
This issue is a bit weird and you will know why I say so. Take a look at the following jsfiddle that I have created to demonstrate this issue.
Now lets get down to the steps to reproduce this.
1. Click on http://goo.gl/IszAn keeping the device in portrait mode.
2. Once the page has completely loaded, rotate the device from portrait mode to landscape mode.
3. Rotate the device back to the portrait mode from the landscape mode.
4. Lo and behold your webpage is now side-scrolling.
Hope another developer does not spend sleepless nights over this issue now and hope Jquery Mobile takes a note of this issue and fixes it in their next release.
UPDATE:
This issue has been fixed and is part of the new version of JQuery Mobile 1.4.0. You can currently check the status of this issue and it's fix inclusion status on Github!
What is the issue?
Web pages are side scrolling on iOS6 and Android 4.2.2 devices.
How did I debug the issue?
This bug was in our applications bug tracker for a long time and since I am the lone front-end developer the project that I am working on, my manger was pushing me to close this bug quickly. I had used the perfect mobile meta tag and still the web pages were side-scrolling. None of my divs had width that was going beyond the device widths and still there was this issue. That day, I decided to break down my HTML to pieces, and tested each piece on the dreadful iOS 6 device. I came down to a textbox that had some placeholder text in it and there it was, the issue was glaring me in my face.
Workaround
I reduced the width of the textbox with the placeholder from 100% to slightly less and then the web pages stopped side-scrolling. I checked for the issue across the web, but did not find any reports on this issue. I have now reported this issue on Jquery mobile github and you can check out the issue report at http://goo.gl/KNFBX
This issue is a bit weird and you will know why I say so. Take a look at the following jsfiddle that I have created to demonstrate this issue.
Now lets get down to the steps to reproduce this.
1. Click on http://goo.gl/IszAn keeping the device in portrait mode.
2. Once the page has completely loaded, rotate the device from portrait mode to landscape mode.
3. Rotate the device back to the portrait mode from the landscape mode.
4. Lo and behold your webpage is now side-scrolling.
Hope another developer does not spend sleepless nights over this issue now and hope Jquery Mobile takes a note of this issue and fixes it in their next release.
UPDATE:
This issue has been fixed and is part of the new version of JQuery Mobile 1.4.0. You can currently check the status of this issue and it's fix inclusion status on Github!
Comments
Post a Comment
Please leave your comments here...