search

Famous / famous-angular

Bring structure to your Famo.us apps with the power of AngularJS. Famo.us/Angular integrates seamlessly with existing Angular and Famo.us apps.
https://famo.us/angular
Mozilla Public License 2.0
1.92k stars 275 forks source link

fa-translate z doesn't respect hierarchy #264

Closed kilianc closed 9 years ago

kilianc commented 10 years ago

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 commented 10 years ago

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 commented 9 years ago

+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)