Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-16260

iOS: Re-layout slow, impairing TextArea typing, with occasional disappearance of text

    Details

    • Type: Bug
    • Status: Open
    • Priority: Low
    • Resolution: Unresolved
    • Affects Version/s: Release 3.2.0
    • Fix Version/s: None
    • Component/s: iOS
    • Labels:
    • Environment:

      Titanium Studio 3.2.0

      Description

      Steps to Reproduce

      Run this code:

      // First, deal with bug with custom module that implements the reverted version of TextArea as per https://jira.appcelerator.org/browse/TIMOB-15535
      var textAreaCreator = Ti.UI.createTextArea;
      if (Titanium.Platform.osname == 'android') {
          textAreaCreator = require('org.camcops.androidtibugfix').createTextArea; // custom module
      }
       
      // Now, onwards...
       
      var n_things_of_each_kind = 20;
      var labels = [];
      var textcontent = 'abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789';
       
      var view = Ti.UI.createScrollView({ layout: 'vertical', backgroundColor: '#FFFFFF' });
       
      var smallbutton = Ti.UI.createButton({ title: 'small' });
      smallbutton.addEventListener('click', function () {
          for (var i = 0; i < n_things_of_each_kind; ++i) {
              labels[i].setFont( { fontSize: 10 } );
          }
      });
      view.add(smallbutton);
       
      var bigbutton = Ti.UI.createButton({ title: 'big' });
      bigbutton.addEventListener('click', function () {
          for (var i = 0; i < n_things_of_each_kind; ++i) {
              labels[i].setFont( { fontSize: 20 } );
          }
      });
      view.add(bigbutton);
       
      function setVisibility(visible) {
          for (var i = 0; i < n_things_of_each_kind; ++i) {
              labels[i].setVisible(visible);
          }
      }
       
      var visiblebutton = Ti.UI.createButton({ title: 'visible' });
      visiblebutton.addEventListener('click', function () { setVisibility(true); } );
      view.add(visiblebutton);
       
      var invisiblebutton = Ti.UI.createButton({ title: 'invisible' });
      invisiblebutton.addEventListener('click', function () { setVisibility(false); } );
      view.add(invisiblebutton);
       
      for (var i = 0; i < n_things_of_each_kind; ++i) {
          var newlabel = Ti.UI.createLabel({
              text: textcontent,
              color: '#000000',
              left: 0,
              top: 0,
              height: Ti.UI.SIZE,
              width: Ti.UI.FILL,
          });
          labels.push(newlabel);
          view.add(newlabel);
       
          view.add( textAreaCreator( {
              top: 0,
              left: 0,
              height: Ti.UI.SIZE,
              width: Ti.UI.FILL,
              backgroundColor: '#888888',
              suppressReturn: false, // multiline
              autocapitalization: Titanium.UI.TEXT_AUTOCAPITALIZATION_NONE,
              autocorrect: false, // we're not measuring the spellchecker's speed
          } ) );
      }
       
      var win = Ti.UI.createWindow();
      win.add(view);
      win.open();
       
      /*
       
      All with Titanium 3.2.0 (plus bugfix for Android multiline as per https://jira.appcelerator.org/browse/TIMOB-15535):
       
      - iOS simulator (iOS 7.0.3) on Mac Mini 2.5GHz Intel Core i5 / OS X 10.8.5:
          visible lag with font size/visibility changes (ripple effect as each element changes one by one);
          sometimes, textarea contents suddenly go partially blank (e.g. typing a large number of short lines)
              then resolve with further keystrokes;
          textarea typing speed OK (very slightly perceptible lag)
          
      - iPad 2 (iOS 7.0.4):
          marked lag/ripple with font size changes/visibility
          similarly, textarea contents sometimes partially vanish (in similar circumstances) then reappear
              with more keystrokes (not spontaneously)
          very marked lag when typing (significantly impairs utility)
          
      - Asus Eee Pad Transformer Prime TF201 (Android 4.1.1):
          font size/visibility changes are instant/synchronous
          textarea contents do not disappear/reappear
          textarea typing speed fine (lag imperceptible)
       
      */

      Expected Result

      Adequate performance on iOS for typing into several multiline fields.

      Actual Result

      • iOS simulator (iOS 7.0.3) on Mac Mini 2.5GHz Intel Core i5 / OS X 10.8.5:
        (a) visible lag with font size/visibility changes (ripple effect as each element changes one by one);
        (b) sometimes, textarea contents suddenly go partially blank (e.g. typing a large number of short lines) then resolve with further keystrokes;
        (c) textarea typing speed OK (very slightly perceptible lag)
      • iPad 2 (iOS 7.0.4):
        (a) marked lag/ripple with font size changes/visibility
        (b) similarly, textarea contents sometimes partially vanish (in similar circumstances) then reappear with more keystrokes (not spontaneously)
        (c) very marked lag when typing (significantly impairs utility)
      • Asus Eee Pad Transformer Prime TF201 (Android 4.1.1):
        (a) font size/visibility changes are instant/synchronous
        (b) textarea contents do not disappear/reappear
        (c) textarea typing speed fine (lag imperceptible)

      I presume the underlying problem is slow re-layout on iOS.

      A slightly odd thing is that it happens even when element size doesn't change (e.g. with visibility changes, as above). If one is making multiple elements visible/invisible, this is a significant usability problem.

      Even more significant is that it's not feasible to type at a normal typing speed into multiline TextAreas in this circumstance (only workaround I've found is to fix the TextArea element height, but that is much harder for users to type significant quantities of text into than height: Ti.UI.SIZE, because the view is then smaller than the paragraph/s being edited).

      Don't know why Android layout is much faster.

      I also don't know if the text disappearance (which is sporadic but frequent) is connected.

      Some method of caching layout changes (e.g. 'I'm about to change a bunch of layout, wait until I've finished before re-rendering… OK, done, re-render') would solve most of these problems, but presumably not the multiline TextArea problem, since that occurs without any Javascript code being involved and is entirely within Titanium and its iOS interface.

        Attachments

          Activity

            People

            • Assignee:
              Unassigned
              Reporter:
              rudolf@pobox.com Rudolf Cardinal
            • Watchers:
              5 Start watching this issue

              Dates

              • Created:
                Updated:

                Backbone Issue Sync

                • It looks like Backbone Issue Sync is not enabled for your project.

                  Git Source Code