CSS transform: translateX/translateY only takes a number, should take a percentage #3707

Tell us about the problem

I'm trying to make an element of variable height slide up into view in our nativescript-angular project.
I'm animating with transform: translateY(100%) to translateY(0), e.g. sliding up form the bottom and on close back again.

The element doesn't start from the bottom, it looks like it only operates on numbers and not on percentage.
I can see in master the value of run through parseFloat here:

But we're running v2.5 and I couldn't figure out what happens to the value in this version.

Below you can see a the problem:

Both the blue and the red box have a fixed height of 200.
The blue box starts at translateY(100%).
The red box starts at translateY(200).
Both animates to translateY(0)

1. The blue box starts half way up and but the red box cannot be seen before the animation starts.
2. They both animate to the top.
3. Animating out again, the blue box stops halfway and the red box disappears out of the view.

According to http://docs.webplatform.org/css/functions/translateY/ it should take a percentage value.

Which platform(s) does your issue occur on?

Both

Please provide the following version numbers that your issue occurs with:

• CLI: 2.5.1
• Cross-platform modules: 2.5.1
• Runtime(s): 2.5.0

Please tell us how to recreate the issue in as much detail as possible.

Set the css-property transform to translateY(100%) and see elements taller than 100dp are still visible on the screen.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

Code here: https://github.com/m-abs/tns-webpack-ng2.3/tree/css-translate-percentage

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.