DisplayObject rendered with incorrect depth in NME 3.2.0. when targeting html5

Question

I'm having a problem with the drawing order of display objects when targeting html5. Note that if I compile for flash it works as expected. The problem is so basic I have a hard time believing it's an issue with NME but rather something critical I'm missing.

Assuming NME works similar to Flash, then the following code should result in a red rectangle with a smaller blue rectangle on top of it. But when I build for html5 the red rectangle is drawn on top!

package;

import nme.display.Bitmap;
import nme.display.Shape;
import nme.display.Sprite;
import nme.display.StageAlign;
import nme.display.StageScaleMode;
import nme.events.Event;
import nme.Lib;

class Main extends Sprite 
{
    public function new() {
        super();
        addEventListener(Event.ADDED_TO_STAGE, init);
    }

    private function init(e) {
        var redContainer : Sprite = new Sprite();

        var redBox : Shape = new Shape();
        redBox.graphics.beginFill(0xaa0000);
        redBox.graphics.drawRect(0, 0, 100, 100);

        var blueBox : Shape = new Shape();
        blueBox.graphics.beginFill(0x0000aa);
        blueBox.graphics.drawRect(0, 0, 50, 50);

        // Add the sprite container 
        this.addChild(redContainer);

        // Add a blue box, which should appear on top of the (empty) container
        this.addChild(blueBox);

        // Add a red box to the container.
        // It should appear *below* the blue box since the container is below
        // the blue box, but the red box is drawn on top of the blue box!
        redContainer.addChild(redBox);
    }

    static public function main() {
        Lib.current.addChild(new Main());
    }
}

I get the same behaviour in Chrome, Firefox and IE9.

Answer 1

It works ok when I builded your code: my html5 build. Try to re install latest version of NME (with newest Haxe).

Problem with DisplayObjects ordering still exist in Jeash, Haxe Javascript library, but for now only if you want to reorder objects later:

this.addChild(redBox);

this.addChild(blueBox);

this.swapChildren(blueBox, redBox);

I tried to remove and again add display object but that don't work. Also setChildIndex don't work (https://bugs.launchpad.net/jeash/+bug/1005791).