CSSPlugin and height

[marten]

Hi,

 

I have a problem toggling the height of an object using the CSSPlugin. Transitioning by adding a class works, removing the class however does not result in the previous height.

.box {
  height: 50px;
  width: 50px;
  background: red; 
}
.active {
    height: 80px;
    background: blue;
 }

var toggle = function () {
  var square = document.querySelector('.box');

  if (square.classList.contains("active")) {
    TweenMax.to(square, 1, {className:"-=active"});
  } else {
    TweenMax.to(square, 1, {className:"+=active"});
  }
}

Or take a look at the codepen URL.

 

Any ideas?

 

Best,

Marten

See the Pen bNLbQQ by anon (@anon) on CodePen

[Carl]

Thanks for the demo, very helpful and strange. 

Seems in both Chrome and Safari a -webkit-logical-height is getting thrown in there. Will need to investigate further

 

[Jonathan]

This is interesting.. look at this codepen demo, view in Chrome or Safari:

 

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

 

You will notice that column 1 (blue box) height property will get overridden by -webkit-logical-height

 

The column 2 (green box) uses the regular height property due to having the !important declaration.

 

Looks like -webkit-logical-height will override the normal height property regardless of order in the CSS rule, also if it is inline.. unless the !important declaration is used.

 

Also looks like this might have to do with CSS3 Writing Modes

 

http://www.w3.org/TR/css3-writing-modes/

http://www.w3.org/TR/css3-writing-modes/#abstract-dimensions

 

[GreenSock]

I believe this was related to the bug mentioned in this other post, and I just provided an updated set of GSAP files that you can try: http://greensock.com/forums/topic/11292-cssplugin-update-breaks-code/?p=45905

 

It looks like it resolves things, but let me know if you notice any other odd behavior.