Skip to main content

Side-scrolling web pages issue with Jquery Mobile - Issue #5748

    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!

Labels:

Comments

Post a Comment

Please leave your comments here...

Recommended for You

Playing with the markers and info window bubbles...

    In the last few posts, we have seen some marker examples and some information window examples. Now, lets do something interesting combining these two things. Just writing that "This is an info window" in the information bubble is not very interesting! And I know this...Have gone through the same phase!     So, today we will do something interesting! We will display the latitude- longitude co-ordinates of the point that the user clicks on the map! Doing this is not at all complex! Copy paste the following code and you will see for yourself a map coming to life!     The output of the above code looks as seen in the result section above! If you have any queries regarding the above code please comment on the blog post or feel free to contact me at my mail ID .
3 comments
Read more

Google Street View Image API

    Street View is one of most used feature of the Google Maps and why not? You can actually see any part of the world as if you are visiting the place at that very moment. And now with the Google Street View Image API, you don't even need to carry a camera with you to the places you visit. You can take-in all the scenic beauty without even bothering about clicking a single picture. You can come back from your vacation and get a few images using the Google Street View Image API and show those images to your friends and relatives. Create an album of high definition images and go ahead and share it on Facebook for your friends to have a look.     Using the Google Street View Image API is very simple and anybody can make use of it without any programming knowledge required. I will walk you through the entire process of effectively using the Google Street View Image API. So if you are set, let's go on an amazing ride across the globe with the Google Street Views. ...
1 comment
Read more

100th Post...

            I’m so excited that I have finally reached this milestone. Well I am not completely certain that this is a big deal but anything that is ' 100 ' just seems big and grand. I have been blogging here for around 8 months now, and it gives me immense pleasure to say that now I have become an experienced blogger.:D             I never thought when I started this blog in November, 2010 that I would have much to offer compared to the hundreds of other GIS bloggers out there. But today with more than 21,000 page views, more than 100 comments, more than 100 followers and several Like and +1s the response to this blog has been nothing short of amazing. Now the next target for me would be to cross 50,000 views.             At the end, I would  like to thank all visitors and members for making this blo...
4 comments
Read more

Punjab cities to implement GIS...

            The Punjab government is all set to implement ultra modern GIS systems in 6 big cities of Punjab namely Amritsar, Ludhiana, Jalandhar, Patiala, Batinda and Pathakot to facilitate future planning, expansion and maintenance of civic infrastructure in these cities. The GIS will be implemented in these cities by October 31, 2011, which would be further implemented in other districts of the state.             Complete information of these cities will be available on the GIS which should prove beneficial and helpful during the preparation of "Master Plans" of these cities in the future. The satellite images of these cities will be taken which would later on be developed to form a large database. The maps that will be generated would provide detailed information on roads and rail networking along with exact locations of bus stops and railway stations. The maps will also s...
1 comment
Read more

Happy Holi...

Wishing all the readers of Spatial Unlimited a very happy and a colorful Holi. May this Holi bring lo ads of joy and colors to your life!!!    
Post a Comment
Read more