Textarea disappearing in Chrome and JQM 1.4.0 #6801

nathany · 2013-12-12T21:49:02Z

Issue description

When typing into a textarea it disappears from the screen. We received the bug report from a Samsung Galaxy Tab user, which we were able to reproduce.

Steps to reproduce

Begin typing into a text area, or use a stylus with handwriting recognition with a Galaxy Tab.

Expected outcome

The text area to be visible to see what is being written.

Actual outcome

Platforms/browsers (including version) and devices tested

Chrome 31.0.1650.59 under Android 4.1.2 on a Samsung Galaxy Tab.

Text areas are also disappearing on the desktop version of Chrome 31.0.1650.63 on Mac OS X 10.9.

jQuery Mobile and jQuery core version used

We are running 1.4.0 rc1, however the following test page exhibits the issue against master. Verified that the description field doesn't disappear when JQM is not loaded.

<!DOCTYPE html>
<html>
<head>
  <title>JQM latest - issue template</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"></script>
</head>
<body>

  <div data-role="page">

    <div data-role="header">
      <h1>Issue template</h1>
    </div><!-- /header -->

    <div class="ui-content">

      <form accept-charset="UTF-8" action="/some/url" class="some_form" data-transition="pop" id="some_form" method="post">

        <div data-role="fieldcontain">
          <label for="to_do_description">Description</label>
          <textarea cols="40" data-mini="true" id="to_do_description" name="to_do[description]" rows="2"></textarea>
        </div>

      </form>

    </div><!-- /content -->

  </div><!-- /page -->

</body>
</html>

http://jsbin.com/IFolanOW/5/edit

The text was updated successfully, but these errors were encountered:

jamesjnadeau · 2013-12-13T02:45:36Z

I can reproduce this using the jsbin on my Asus Transformer pad 300, 4.2.1 chrome
Switching tabs brings it back, landscape or portrait makes no difference.
Does a weird zôom when the textarea is selected

However

Works fine on my motox 4.2.2, chrome

quickly79 · 2013-12-13T13:10:40Z

I cannot reproduce this on desktop using Chrome Version 31.0.1650.63 Mac OSX 10.8.5

nathany · 2013-12-13T23:14:52Z

@quickly79 I wonder if this is a video driver difference (if JQM is using the GPU). OS X 10.9 and Intel 4000 here.

forrest · 2013-12-13T23:17:27Z

Perhaps a 3d transform is causing unexpected issues?

josemvidal · 2013-12-20T02:28:58Z

I just ran into this problem on a Mac (OSX 10.9.1) running Chrome Beta, and Canary, and Chrome 31.0.1650.63. Loaded the html page above to confirm.

The textarea disappears after typing just one character in it. There is some flickering as this happens. Devtools still shows it in the DOM, and highlights its position on the page, but its not there anymore and I cannot type into it.

Both Safari and Firefox on the same machine work fine, only Chrome fails.

fortress-of-solitude · 2013-12-20T07:25:32Z

I see a somewhat similar issue on iOS6/7 devices (iPhone & iPad). The textarea is embedded in a popup. So as a character is typed, the text area momentarily disappears causing the popup to be redrawn. Since the textarea does return (i.e. it does not totally disappear) the resultant effect is that the popup appears to flicker with the typing of each character.

josemvidal · 2013-12-22T12:42:56Z

As a workaround, I found that getting rid of the float:left in

@media (min-width: 28em) {
......
    .ui-field-contain > label + [class*="ui-"],
    .ui-field-contain .ui-controlgroup-controls {
        float: left; /*delete this one */
        width: 78%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
    }

seems to fix that problem. But, it breaks the slider widget.

arschmitz · 2013-12-23T15:21:28Z

This is a rendering bug in chrome we will need to look into it to see if there is a possible workaround.

fortress-of-solitude · 2013-12-23T17:57:06Z

Should I file a separate issue for "similar issue on iOS6/7 devices (iPhone & iPad). The textarea is embedded in a popup. So as a character is typed, the text area momentarily disappears causing the popup to be redrawn. Since the textarea does return (i.e. it does not totally disappear) the resultant effect is that the popup appears to flicker with the typing of each character"

amirpeivandi · 2014-01-08T16:06:30Z

Any update on this issue?

nathany · 2014-01-08T18:54:58Z

@arschmitz Do you have a reference to the issue in Chromium? https://code.google.com/p/chromium/issues/list

m4ff · 2014-02-01T11:52:21Z

I solved the problem by adding style="position: relative" to the textarea.

nathany · 2014-02-03T19:42:26Z

Thanks @m4ff. That workaround works for me under the desktop verison of Chrome 32.0.1700.107.

Unfortunately the flicker still occurs when trying to do this via css:

textarea {
  position: relative !important;
}

😦

gabrielschulhof · 2014-02-10T14:16:00Z

I wonder if this has anything to do with the fact that we momentarily set the textarea height to 0 whenever the user types a single character. We do that so as to compute the height the textarea such that no scrollbar appears. It's part of the autogrow extension.

Try setting data-autogrow="false" on the textarea and see if you're still seeing this problem.

nathany · 2014-02-10T18:20:00Z

@gabrielschulhof Yes, it is related.

Just testing on desktop Chrome 32.0.1700.107 (without even using emulate) data-autogrow="false" solves the problem.

Note: we are still on JQM 1.4.0-rc.1. We should really get that upgraded.

fortress-of-solitude · 2014-02-11T03:22:20Z

@gabrielschulhof Yes, I am absolutely convinced it is related. On iOS devices the flicker effect is very pronounced with JQM 1.40

I'm making do with this minimal but kludgy fix... just added the 'else' as indicated below.

    _prepareHeightUpdate: function( delay ) {
        if ( this.keyupTimeout ) {
            clearTimeout( this.keyupTimeout );
        } >> else <<
        if ( delay === undefined ) {
            this._updateHeight();
        } else {
            this.keyupTimeout = this._delay( "_updateHeight", delay );
        }
    },

gabrielschulhof · 2014-03-01T22:29:31Z

@arschmitz we should consider removing the code that sets the height to 0. FF may have obviated the reason for adding it, and now that we have overflow hidden on autogrow text areas there should be no scrollbar, even if we are slightly off with our calculation. As long as the text is never clipped, we should be able to do without setting the height to 0.

jaspermdegroot · 2014-06-02T15:06:07Z

As discussed during our weekly meeting on May 1 we are going to remove the code that sets the height to 0, but test thoroughly on several browsers/devices before merging in master.

gabrielschulhof · 2014-06-02T19:31:52Z

OK, I didn't think it through. Setting the height to 0 is necessary not only for the FF bug, which may be gone, but also for measuring the height of the text inside the textarea, which is essential to the autoshrink feature. So, if we remove the code that sets the height to 0, we also remove the ability to autoshrink.

jaspermdegroot · 2014-06-02T19:52:32Z

Whatever we do to fix this without breaking autoshrink, we have to test on IE8 to make sure we don't reintroduce #6998.

gabrielschulhof · 2014-09-08T07:25:18Z

Since I don't believe we can fix this without setting the height to 0, and since this is a Chrome bug, and Chrome does get updates, I'm wondering: Is this bug still reproducible? @fortress-of-solitude? @nathany? @josemvidal? @jamesjnadeau?

jamesjnadeau · 2014-09-08T11:01:05Z

I'm unable to reproduce this on my devices anymore, yay evergreen browsers! I vote for closing....

jaspermdegroot · 2014-09-08T16:08:54Z

Thanks @jamesjnadeau ! @nathany can you confirm? I am closing this ticket as resolved, but we will re-open if you still notice the problem.

nathany · 2014-09-10T16:42:47Z

@jaspermdegroot Sorry for the delay. I tracked down a Galaxy Tab, but of course it is now running Chrome 37 rather than Chrome 31. No issues to report.

Between Crosswalk and asking people to upgrade Chrome, we have no need to support old versions of Chrome on Android.

arschmitz · 2014-09-10T17:56:22Z

@nathany we only support current -1 for chrome so 31 is no longer supported.

aquachroma · 2014-10-17T00:12:07Z

@jaspermdegroot @gabrielschulhof
Textarea disappearing on current latest safari release Version 8.0 (10600.1.25) and on Chrome 38.0.2125.104 both on OS X 10.10.

Problem hasn't gone away on everything.

beveradb · 2014-11-28T14:28:47Z

This is still reproducible with jQM 1.4.5 in any Android WebView (which includes anyone using phonegap). Even on a device (Nexus 7 2013) with the latest version of Android (5.0 Lollipop), this is still reproducible inside a WebView.
I don't know if it's a WebKit issue or Chrome specifically, because supposedly the Android WebView is now using a current (537.36) version of WebKit?

Either way, I think this should be re-opened as it still causes issues for anyone using an Android WebView / Phonegap.
My current workaround is data-autogrow="false", which at least makes the textarea usable again.

usmonster · 2015-06-25T13:53:36Z

Maybe related to https://crbug.com/417133 and/or https://crbug.com/447421 ?

mmariani pushed a commit to mmariani/jdocman that referenced this issue Feb 6, 2014

textarea position:relative to fix jquery-archive/jquery-mobile#6801

8990033

mmariani pushed a commit to mmariani/jdocman that referenced this issue Feb 6, 2014

textarea position:relative to fix jquery-archive/jquery-mobile#6801

91a5740

gabrielschulhof modified the milestones: 1.4.3, 1.4.1 Mar 1, 2014

jaspermdegroot assigned gabrielschulhof Jun 2, 2014

jaspermdegroot modified the milestones: 1.4.4, 1.4.3 Jun 5, 2014

jaspermdegroot closed this as completed Sep 8, 2014

jaspermdegroot removed this from the 1.4.4 milestone Sep 8, 2014

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Textarea disappearing in Chrome and JQM 1.4.0 #6801

Textarea disappearing in Chrome and JQM 1.4.0 #6801

nathany commented Dec 12, 2013

jamesjnadeau commented Dec 13, 2013

quickly79 commented Dec 13, 2013

nathany commented Dec 13, 2013

forrest commented Dec 13, 2013

josemvidal commented Dec 20, 2013

fortress-of-solitude commented Dec 20, 2013

josemvidal commented Dec 22, 2013

arschmitz commented Dec 23, 2013

fortress-of-solitude commented Dec 23, 2013

amirpeivandi commented Jan 8, 2014

nathany commented Jan 8, 2014

m4ff commented Feb 1, 2014

nathany commented Feb 3, 2014

gabrielschulhof commented Feb 10, 2014

nathany commented Feb 10, 2014

fortress-of-solitude commented Feb 11, 2014

gabrielschulhof commented Mar 1, 2014

jaspermdegroot commented Jun 2, 2014

gabrielschulhof commented Jun 2, 2014

jaspermdegroot commented Jun 2, 2014

gabrielschulhof commented Sep 8, 2014

jamesjnadeau commented Sep 8, 2014

jaspermdegroot commented Sep 8, 2014

nathany commented Sep 10, 2014

arschmitz commented Sep 10, 2014

aquachroma commented Oct 17, 2014

beveradb commented Nov 28, 2014

usmonster commented Jun 25, 2015

Textarea disappearing in Chrome and JQM 1.4.0 #6801

Textarea disappearing in Chrome and JQM 1.4.0 #6801

Comments

nathany commented Dec 12, 2013

Issue description

Steps to reproduce

Expected outcome

Actual outcome

Platforms/browsers (including version) and devices tested

jQuery Mobile and jQuery core version used

jamesjnadeau commented Dec 13, 2013

quickly79 commented Dec 13, 2013

nathany commented Dec 13, 2013

forrest commented Dec 13, 2013

josemvidal commented Dec 20, 2013

fortress-of-solitude commented Dec 20, 2013

josemvidal commented Dec 22, 2013

arschmitz commented Dec 23, 2013

fortress-of-solitude commented Dec 23, 2013

amirpeivandi commented Jan 8, 2014

nathany commented Jan 8, 2014

m4ff commented Feb 1, 2014

nathany commented Feb 3, 2014

gabrielschulhof commented Feb 10, 2014

nathany commented Feb 10, 2014

fortress-of-solitude commented Feb 11, 2014

gabrielschulhof commented Mar 1, 2014

jaspermdegroot commented Jun 2, 2014

gabrielschulhof commented Jun 2, 2014

jaspermdegroot commented Jun 2, 2014

gabrielschulhof commented Sep 8, 2014

jamesjnadeau commented Sep 8, 2014

jaspermdegroot commented Sep 8, 2014

nathany commented Sep 10, 2014

arschmitz commented Sep 10, 2014

aquachroma commented Oct 17, 2014

beveradb commented Nov 28, 2014

usmonster commented Jun 25, 2015