[TIMOB-10803] MobileWeb: Textfield has misaligned text

MobileWeb - Ti.UI.Textfield text misaligned

In certain conditions when the fontSize and textfield height are both small, the text is sometimes not vertically aligned correctly and usually drifts downwards where the text goes past the bottom of the textfield and becomes hidden. There are a few workarounds with one being manual and the other through a postlayout event. - The manual method involves typing in the textfield, clearing it, blurring it. The text should now be positioned correctly. - The postlayout event focuses and the blurs the textfield. The text should now be positioned correctly. Attached are images where it is incorrectly aligned and where it is correctly aligned.

Steps to reproduce:

1. Copy the code below into a new project 2. Run using mobileweb in chrome or internet explorer 3. Note the text is not aligned correctly. 4. workarounds below code

CODE:

var win  = Ti.UI.createWindow({
	backgroundColor: 'white'
});
win.open();
var view = Ti.UI.createView({
	height: 500,
	width: 500
});
var text = Ti.UI.createTextField({
	hintText: 'Required',
	backgroundColor: '#FFF',
	width: 40,
	height: 12,
	font: {
		fontSize: 7
	}
});
view.add(text);

//This postlayout event is a workaround for the bug
// text.addEventListener('postlayout', function() {
	// text.focus();
	// text.blur();
// });

win.add(view);

Workarounds

MANUAL fix: 1. Type in the textfield 2. clear the textfield 3. click on the URL bar to blur the textfield 4. The text should be in the correct position POSTLAYOUT fix: 1. uncomment the eventlistener section in the code above 2. Run using mobileweb or internet explorer 3. Note the text is now aligned correctly.