Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Android: Browser and WebView crash when only one input is present on page #4103

Closed
wexstorm opened this issue Apr 18, 2012 · 8 comments
Closed

Android: Browser and WebView crash when only one input is present on page #4103

wexstorm opened this issue Apr 18, 2012 · 8 comments
Labels
Platform: Android Priority: High

Comments

@wexstorm
Copy link

While developing a PhoneGap-App for Android, I discovered this very serious bug.
When just one textinput is present on a page, Android crashes without a warning. (Doesn't matter if in WebView via Phonegap or native Browser).
Also, if several inputs are present (some disabled, some readonly) and an a hidden div which is displayed afterwards, this issue can be reproduced.
Tested on:

  • Motorola 2.2.1
  • Simulator 2.1, 2.2, 2.3

These "fixes" didn't work:

  • Adding a second invisible input-Element
  • Removing the type-Attribute
  • trying different PhoneGap-/jQM-Versions

Any suggestions please?

Here is my sample-code:

<!DOCTYPE html>
<html>
    <head>
        <title>jqm test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile.css" media="all">
        <link rel="stylesheet" type="text/css" href="css/jquery.theme.min.css" media="all">
        <script type="text/javascript" src="js/jquery.js"></script>
        <script src="js/jquery.mobile.js" type="text/javascript"></script>
    </head>
    <body>
        <div  data-role="page">
            <form>
                <input type="text" value="" />
            </form>
        </div>
    </body>
</html>
@wexstorm
Copy link
Author

Okay, seems that I got the (most obvious) solution:
Just position an empty input field absolutely outside your content (e.g. -200px, but in your page), set it to 1 by 1 pixel in size and hope it works.
I know, this is not just a problem of jqm, but a problem of jqm in association with Android (2.x).
Was this issue never tracked?

@toddparker
Copy link
Contributor

No, this hasn't been reported as far as I know. Really odd. Here is your code in a jsbin, can you confirm that this is causing the issue?
http://jsbin.com/iyukaw/
http://jsbin.com/iyukaw/edit

If you add a label and associate it via the for attribute, does that change anything? If jQM is removed, does the problem go away?

@wexstorm
Copy link
Author

First of all thanks for your reply.
But, now this is odd. Your demo code on jsbin works flawlessly. After copying the source code and calling it locally or from my domain in the web (http://www.bit-storm.de/jqm), the android browser crashes. Also adding a label causes the same problem. When I remove jQM, the problem doesn't occur and I can type in as much text as I want.
I've seen similar problems in issue #3208.

Also, the problem exists, when I add some input fields (more the one) on a hidden DIV-Element, showing it later and calling textinput() on all input-Elements. When I add this tiny 1 x 1px input anywhere, it works.

I took a little video, just to show you what happens: http://www.bit-storm.de/jqm/android.mp4 (7MB)
Please give me a quick note, if you watched the video, so that I can remove it :)

@wexstorm
Copy link
Author

Just another note. It works on jsbin, because of the file edit.js, which creates an a-tag in the body-tag.
So, no really fix (out of the box) for jqm. It must have something to do with "rerendering" of the dom after it is loaded (e.g. by creating a new element with javascript)...

@toddparker
Copy link
Contributor

@wexstorm - that is so bizarre. Can you get the crashing to happen without jQM? Just trying to figure out if this is just an Android quirk.

Your test page looks clean and correct, but I do see this at the bottom - does removing this change anything?

<script>


</script>
<script src="edit.js"></script>
<script>var _gaq=[['_setAccount','UA-1656750-13'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)})(document,'script')</script></body>

@wexstorm
Copy link
Author

wexstorm commented May 2, 2012

Hi Todd,

this script is added by jsbin. When I remove it, the app crashes again. When I download this "edit.js" file from jsbin and comment the line out, where the "edit"-Button is added via JavaScript to the DOM the app crashes again.

@wgbartley
Copy link

I am running into the same (or similar) issue. To add some extra WTF to the fire, it only crashes when I enter the number "7" into the text input. And, just as strange, it does not allow me to enter the number "9". It doesn't crash, it just doesn't show the "9".

I tried scrapping all the js and CSS from jQM and re-build the form from the ground up and copy the jQM CSS to try and make the form look at least halfway decent. I added all the CSS with the borders, margins, fonts, gradients, rounded corners, etc. After I tested it, it still would crash on the number 7. I started stripping away CSS. After commenting out the "overflow-x: hidden" attribute on the

element, it started working.

I don't know if this helps any, but I thought I'd share. I'll have to revisit this in the future when I'm on less of a deadline. If I have any success, I'll post back here.

@jaspermdegroot
Copy link
Contributor

I am going to close this ticket as duplicate, in favor of #3208 which is older.

@jaspermdegroot jaspermdegroot mentioned this issue Jul 16, 2012
Closed
@vinomarky vinomarky mentioned this issue Oct 1, 2012
Closed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Platform: Android Priority: High
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@wgbartley @toddparker @wexstorm @jaspermdegroot