Flex: Scrolling issue with VBox content

Recently I've faced with strange issue for apps developed in Flex 3.3. I had VBox container, which is populated with new components after clicking on corresponding "Add Item" button. This VBox has fixed size and disabled horizontal scrolling:

mx:VBox height="440" width="900" verticalScrollPolicy="auto" horizontalScrollPolicy="off" ...

Issue was next - when user has added a lot of items, vertical scroll bar appears and after scrolling top and down for few times UI garbage is shown instead of properly rendered items that were added. I mean that all those items were only partially visible and messed up with each other.

Setting cacheAsBitmap="false" and cachePolicy="off" didn't helped (as we know caching as bitmap in Flex is buggy). After small investigation I got to mx.core.Container.updateDisplayList method:


override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);

..............

var backgroundColor:Object = enabled ?
null :
getStyle("backgroundDisabledColor");

if (backgroundColor === null || isNaN(Number(backgroundColor)))
backgroundColor = getStyle("backgroundColor");

..............

contentPane.cacheAsBitmap = (backgroundColor != null);
}

After looking at the last command in this method I got back to my code with VBox and found next style property - backgroundColor="0xffffff". After removing it, scrolling issue vanished.

If there is a need to set background color for your VBox and get rid of this issue, you can play with backgroundAlpha style property - refer mx.core.Container.updateDisplayList method for details.