Chrome Bug with transformOrigin: "50% 50%"?

[elegantseagulls 209 Likes (Specialist)]

Hi all, 

 

I'm having an issue with transformOrigin combined with scale in Chrome (for OSX) (not the case in FF or Opera).

 

Check a box, and click the CORRECT button. The 'check' jumps up the the viewBox in Chrome, but stays nicely centered in FF and Opera.

 

This Pen has been fixed to show solution.

 

See the Pen qbWzgK by ryan_labar (@ryan_labar) on CodePen

See the Pen vNozXO by ryan_labar (@ryan_labar) on CodePen

[Jonathan 5,176 Likes (Superhero)]

Hello elegantseagulls, and Welcome to the GreenSock Forum

 

This is not a chrome bug with transform-origin. This is happening because you are using CSS transitions along with GSAP. And also because the way the HTML markup and CSS is for the <label> tags and the SVG inside it.

 

See this working example in Chrome

 

See the Pen gPYVyg by jonathan (@jonathan) on CodePen

 

I suggest you don't mix CSS transitions or CSS animations with GSAP when animating elements.

 

You need to remove the CSS transition property for your .correct  and .wrong class

.wrong{
  fill:$wrong;
  /*transition: stroke .5s 1s;*/ /* remove this property and apply the fill with GSAP instead */
}
.correct{
  fill:$correct;
  /*transition: fill .5s;*/ /* remove this property and apply the fill with GSAP instead */
}

x

Also you should add the following CSS so your markup of labels are in order for stacking on top of each other using CSS instead of <br> tags.

x

label {
  position:relative;
  line-height: 40px;
  clear: both;
  display: block;
}

I also removed your <br> tags in between each label tag since the CSS above with clear:both and display:block will do a better job than using break row tags. break row tags are calculated differently as far as their line-height. And anytime you use position absolute you should have a parent with position:relative.

 

Also i had to make it so you didn't use GSAP CSSPlugin classname property, since you were using it to switch a class that was triggering a CSS transition. The purpose of the GSAP classname property is to animate the CSS styles directly on that class name. But it should not be used with CSS rules that have CSS transitions or CSS animations. Or there will be a conflict of buggy behavior, like you were seeing in Chrome.

 

So i made your correct() function like this, so it changes the CSS fill property directly, instead of using your mix of CSS transitions and GSAP:

function correct(){
  var tl = new TimelineMax();
  tl
    .add('right')
    .set(".marked", {transformOrigin: "50% 50%"})
    .to(".marked", .88, {scale:".8", ease:Elastic.easeIn.config(2, 0.7)}, 'right')
    .to(".marked", .5, {scale:"1", ease:Elastic.easeOut.config(2, 0.7)})
    //.to('.marked', .27, {className:'+=correct', delay:.88}, 'right') 
    .to('.marked', .27, {fill:'#006400', delay:.88}, 'right') /* just change the fill directly with GSAP */
  return tl;
}

Usually these type of cross browser display issues happen due to the way the initial CSS and HTML are setup. And most importantly when you try to mix GSAP with CSS transitions or CSS animations, both fighting to animate an element. Once you have your elements correctly positioned then your animations will look the same cross browser, especially with CSS transforms.

 

Link to CSSPlugin Docs:

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

 

[elegantseagulls 209 Likes (Specialist)]

Thank you so much for the detailed response, @Jonathan! It's answers like this that makes me love GSAP! 

 

Thanks for the info on the CSSPlugin. I was hoping to leverage the variables for colors in SCSS, but I might just have to hardcode those into the JS...

 

Also, you'll be happy to know I wasn't planning on keeping the <br/> elements.  

[Jonathan 5,176 Likes (Superhero)]

Glad to help

[elegantseagulls 209 Likes (Specialist)]

Here's the "end" product: 

See the Pen vNozXO by ryan_labar (@ryan_labar) on CodePen