"Translate" set in GSAP not working properly in Firefox

[ohem 334 Likes (Leader)]

Hi, I have some text which I'm vertically centering using 

 

  top: 50%;
  transform: translateY(-50%);

I figured it would be better to set it using GSAP to avoid prefixes & have it work cross-browser.  So I switched to this: 

.set(".headline", {top: "50%", transform: "translateY(-50%)"})

 

While it works great in Chrome, for some reason it does not set the alignment as expected in Firefox.  Is there a way to fix this, or should just I do this part in the CSS?

 

Here's a simplified example: 

 

Any suggestions are appreciated.

See the Pen yLOVEmE by ohem (@ohem) on CodePen

[PointC 14,185 Likes (Superhero)]

 .set(".headline", {top: "50%", yPercent:-50})

 

[ohem 334 Likes (Leader)]

Thank you!  You're the best!

[GreenSock 18,263 Likes (Superhero)]

FYI, that's definitely caused by a Firefox bug (which I haven't seen before): 

let div = document.createElement("div");
div.style.transform = "translateY(-50%)";
document.body.appendChild(div);
console.log(window.getComputedStyle(div).transform); // returns WRONG value in Firefox!!!

But yeah, I'd always recommend setting things using the proper GSAP shortcuts syntax like @PointC suggested. Much cleaner, more reliable and performant too. 👍