Placeholder in textbox causing the webpage to side-scroll on iOS6 #5748

Closed
Shreerang opened this Issue Mar 11, 2013 · 11 comments

Projects

None yet

4 participants

@Shreerang

Steps to reproduce:

  1. Create a form with a text field and a placeholder value.
  2. The width of the text box should be 100%.
  3. Let the page load, when the device is in Portrait mode.
  4. Once the page loads, rotate the device to landscape mode and then back to portrait mode.
  5. The web page is now side-scrolling

This issue is not being observed on earlier versions of iOS and any version of Android. This issue is also observed on Android 4.2.2 version, but am not sure of this.

@agcolom
Member
agcolom commented Mar 20, 2013

@Shreerang I have created a simple jsbin to illustrate: http://jsbin.com/onibuc/357

could you please confirm that you are experiencing this issue with this test page. Thanks.

@Shreerang

@agcolom I have created a simple jsfiddle to illustrate: http://jsfiddle.net/Shreerang/P5a3U/embedded/result/

The jsbin that you have created does not replicate the issue that I am facing. You have used

. Including data-role="content" is not causing the issue, but excluding it will cause the issue. I have also attached the image showing the issue.
IMG_1347

@jaspermdegroot
Member

I can confirm the issue (iOS 6.1.3/iPad Retina). JS Bin test page: http://jsbin.com/atarer/9

@Shreerang

I am verifying this issue on Android 4.2.2/Google Nexus 4...

@Shreerang

I have made a detailed post of this issue on my blog Spatial Unlimited. Check out the post at http://shreerangpatwardhan.blogspot.in/2013/03/side-scrolling-web-pages-issue-with.html

@anthonyac

My apologies if you consider that this comment is not related or should be logged as a separate issue, I'd be happy to open as another issue.

I have created a jsbin to show that a similar issue occurs when a navbar is included in a footer (fixed or non-fixed): http://jsbin.com/onibuc/379

When focusing on a listview search filter, or a form input, (either with or without placeholder text) the screen is able to be panned left/right.

This may also possibly be related to: #5155

I have tested on an iPhone 4S and iOS 5.1 using the stock Safari browser, and on the same device with Chrome 25.0.1364.124

@jaspermdegroot
Member

When I inspect the code I see correct values for the html and body width but the layout viewport isn't updating. After triggering a redraw you the page cannot be panned anymore. This was on Android 4.2.
So this is not a bug in the textinput CSS itself.

I will be working on a refactor of our zoom / orientation change and transitions logic for 1.4 and this ticket will be part of it (I changed the milestone). Possibly related tickets: #3956 and #5731.

@anthonyac - I will look into your issue and test page as well. No need to make a new ticket for now. I haven't tested it yet but I think it's the same as #3956 and #5620 (closed as duplicate). I don't think it's related to #5155 because that was actually a bug in our CSS and was visible on all mobile browsers.

@Shreerang

@uGoMobi what is the probable date for this to be fixed in JQM version 1.2.0? I am verifying the issue on iPhone5 iOS6.

@jaspermdegroot
Member

@Shreerang

I am not sure if there will be a 1.2.2 release. That being said, whether we can land the fix in 1.3 and 1.2 maintenance releases or not depends on how we fix this issue.

@jaspermdegroot
Member

Closing as fixed by commit 9f70f06. The fix will land in 1.4.

@anthonyac

Works like a charm, thanks for this!

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