Details
Low
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.
