Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ohem

"Translate" set in GSAP not working properly in Firefox

Recommended Posts

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

Link to comment
Share on other sites

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

 

  • Like 4
Link to comment
Share on other sites

Thank you!  You're the best!

  • Like 1
Link to comment
Share on other sites

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. 👍

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×