the if element doesn't keep the position of its child component

<zk>
    <zscript><![CDATA[
        Map dummyVm = new HashMap();
        dummyVm.put("flag", true);
    ]]></zscript>
    <div viewModel="@id('vm') @init(dummyVm)">
        <apply template="test">
            <template name="content">
                <apply template="some-control"/>
<!--                workaround, make the apply dynamic-->
<!--                <apply template="some-control" dynamicValue="true"/>-->
                <div>
                    2) <button label="toggle A/B" onClick='dummyVm.put("flag", !dummyVm.get("flag")); BindUtils.postNotifyChange(null, null, dummyVm, "flag");'/>
                </div>
                <if test="@load(vm.flag)">
                    <div>
                        3) show A
                    </div>
                </if>
                <if test="@load(not vm.flag)">
                    <div>
                        3) show B
                    </div>
                </if>
            </template>
        </apply>
    </div>

    <template name="some-control">
        <div>
            1) some control
        </div>
    </template>

    <template name="test">
        <div>
            header
        </div>
        <div>
            <apply template="content"/>
        </div>
        <div>
            footer
        </div>
    </template>
</zk>