     //
     //--------------------------------------------------------------------------
     
+    private var textDisplayGroup:VGroup;
+
+    private var _isIOS:Boolean;
+    
     /**
      *  @private
      */
     override protected function createChildren():void
     {
+        if (!textDisplay)
+        {
+            // wrap StyleableTextField in UIComponent
+            textDisplay = StyleableTextField(createInFontContext(StyleableTextField));
+            textDisplay.styleName = this;
+            textDisplay.multiline = true;
+            textDisplay.editable = true;
+            textDisplay.wordWrap = true;
+            textDisplay.addEventListener(Event.CHANGE, textDisplay_changeHandler);
+            textDisplay.addEventListener(FlexEvent.VALUE_COMMIT, textDisplay_changeHandler);
+            
+            // on iOS, resize the TextField and let the native control handle scrolling
+            _isIOS = (Capabilities.version.indexOf("IOS") == 0);
+            
+            // wrap StyleableTextComponent in Group for viewport
+            textDisplayGroup = new VGroup();
+            textDisplayGroup.clipAndEnableScrolling = true;
+            textDisplayGroup.addElement(textDisplay);
+            
+            // scroll to the caret position
+            textDisplay.addEventListener(Event.CHANGE, caret_changeHandler);
+            textDisplay.addEventListener(FlexEvent.VALUE_COMMIT, caret_changeHandler);
+        }
+        
+        if (!scroller)
+        {
+            scroller = new Scroller();
+            scroller.minViewportInset = 0;
+            scroller.measuredSizeIncludesScrollBars = false;
+            addChild(scroller);
+        }
+        
+        if (!scroller.viewport)
+            scroller.viewport = textDisplayGroup;
+        
         super.createChildren();
-        
-        textDisplay.multiline = true;
-        textDisplay.wordWrap = true;
-        textDisplay.addEventListener(Event.CHANGE, textDisplay_changeHandler);
-        textDisplay.addEventListener(FlexEvent.VALUE_COMMIT, textDisplay_changeHandler);
     }
     
     /**


use namespace mx_internal;

/**
 *  ActionScript-based skin for TextArea components in mobile applications.
 * 

            {
                borderClass = spark.skins.mobile320.assets.TextInput_border;
                layoutCornerEllipseSize = 24;
                layoutMeasuredWidth = 612;
                layoutMeasuredHeight = 106;
                layoutBorderSize = 2;
                
