TLF result is different from Flex in AIR

Hi,

I want to create colorful container TLF that seem to be as follows.

- 1 character is 1 container

- display 1 character in turn

- use Linked Containers

- SDK: Flex4.1(build 16076) + AIR2.0

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark" 
            xmlns:mx="library://ns.adobe.com/flex/mx"
            creationComplete="init()"
            minWidth="800" minHeight="600">
   <s:layout>
      <s:HorizontalLayout/>
   </s:layout>
   
   <fx:Script>
      <![CDATA[
         import flashx.textLayout.container.ContainerController;
         import flashx.textLayout.conversion.TextConverter;
         import flashx.textLayout.elements.FlowElement;
         import flashx.textLayout.elements.ParagraphElement;
         import flashx.textLayout.elements.SpanElement;
         import flashx.textLayout.elements.TextFlow;
         
         import spark.core.SpriteVisualElement;
         
         private function init():void
         {
            var sample:String = "<?xml version='1.0' encoding='utf-8'?>" +
               "<flow:TextFlow whiteSpaceCollapse='preserve'" +
               " xmlns:flow='http://ns.adobe.com/textLayout/2008'>" +
               "<flow:p><flow:span>ABCDEF</flow:span></flow:p></flow:TextFlow>";            
            
            var textFlow:TextFlow = TextConverter.importToFlow(sample,TextConverter.TEXT_LAYOUT_FORMAT);
            textFlow.fontSize = 50;
            
            //  Timer to display 1 character in turn
            var len:int = textFlow.getText().length;
            var displayTimer:Timer = new Timer(100,len);
            displayTimer.addEventListener(TimerEvent.TIMER,onDisplayTimer);
            displayTimer.start();
            
            function onDisplayTimer(event:TimerEvent):void
            {
               var container:SpriteVisualElement = containerBG(50,50,textFlow.blockProgression);
               container.width = 50;
               container.height = 50;
               addElement(container);
               
               var controller:ContainerController = new ContainerController(container, 50, 50);
               textFlow.flowComposer.addController(controller);
               
               // update contoroller
               var index:int = textFlow.flowComposer.getControllerIndex(controller);
               textFlow.flowComposer.updateToController(index);
            }
         }
         
         // container background color is random.
         private function containerBG(w:Number,h:Number,bp:String):SpriteVisualElement
         {
            var boxBG:SpriteVisualElement = new SpriteVisualElement();
            
            var g:Graphics = boxBG.graphics;
            
            var color:uint = Math.random() * 0xFFFFFF;
            
            g.lineStyle(0.5,color);
            g.beginFill(color,1);
            g.drawRect(0, 0, w, h);
            g.endFill();
            
            return boxBG;
         }
         
      ]]>
   </fx:Script>
</s:Application>
 

In Flex application, result as expected.

But, In AIR application, character slips that seem to be as follows.

Why will results be different?

thanks.