fa-translate z doesn't respect hierarchy

[kilianc]

With this code I see the yellow surface O_o

 <fa-app>

    <fa-modifier fa-translate="[0, 0, 2]">
      <fa-view>
        <fa-modifier fa-translate="[0, 0, 1]">
          <fa-surface fa-background-color="'red'"></fa-surface>
        </fa-modifier>
      </fa-view>
    </fa-modifier>

    <fa-modifier fa-translate="[0, 0, 1]">
      <fa-view>
        <fa-modifier fa-translate="[0, 0, 100]">
          <fa-surface fa-background-color="'yellow'"></fa-surface>
        </fa-modifier>
      </fa-view>
    </fa-modifier>

  </fa-app>

[michaelobriena]

Modifiers are just additive. Your red surface is forward 3 pixels and the yellow is forward 101 pixels which is why you are seeing the yellow surface. The nesting in the directives is only for hierarchical purposes and is not at all reflected in the DOM.

[zackbrown]

+1 to @michaelobriena 's comment. This is expected behavior based on the provided code. I'll go ahead and close this but feel free to reopen if you're still having problems (or feel free to continue the discussion here if anything is unclear)