gsap.getProperty height returning 'auto'

[tpav]

I developed an animation in isolation and everything worked, now that I've combined it on another page with other page elements

 

gsap.getProperty('.chat1', 'height')

 

returns 'auto' whereas is retuned  a number before. chat1 has no set CSS height.

 

document.querySelector('.chat1').offsetHeight);

 

still returns a number.

 

I'm wracking my brain trying to figure out what's different. Comparing the element with Chrome dev tools, they seem to have identical properties.

 

[Rodrigo]

Hi @tpav,

 

Can you provide a minimal demo in codepen that shows the issue? I've been trying a few things without setting a height property on the DOM element and I always get a number.

 

Happy Tweening!

[GreenSock]

This may be helpful: 

https://stackoverflow.com/questions/8628005/why-does-getcomputedstyle-return-auto-for-pixels-values-right-after-element-cr

 

My guess is that you've got an ancestor element set to display: none. Here's a minimal demo:

See the Pen gOzZxaY by GreenSock (@GreenSock) on CodePen

[tpav]

There may be something to that! I'll look into it.  Here's the demo. Moving it to CodePen surfaced another variable. Seems GSAP returns the height if the div's content, while javascript, and what I want is the height plus padding. Trying to center the left icon on the varying heights of the right div. 

 

See the Pen XWqoayx by tpavell (@tpavell) on CodePen

 

Can't explain why it all works here on my original dev page. 

[GreenSock]

There are two problems with your demo: 

1. You're calculating those values at completely different times. Technically the height isn't changing so it doesn't really make a difference here, but I wanted to point out that you're running the gsap.getProperty() stuff immediately (on the very first tick) whereas you've got the "js" one calculating after 4 seconds. Again, it doesn't make a difference in this case...I just wanted to point it out. 
2. The REAL problem is just a misunderstanding about how height is calculated. The computed CSS "height" property is affected by the box-sizing property. The offsetHeight is different in that regard. Just set box-sizing: border-box and you'll see that the values match (well, some browsers may actually add some decimals to one and not the other but for all practical purposes they match). 

Here's the proof: 

See the Pen jOxXYNr?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I hope that helps. 

[tpav]

SOLVED: Even though the animation parent was set to block before the animation began, the animated elements parent was initially rendered with display:none Reworking the page to avoid using display:none solved the issue. Thank you Rogrigo and Jack for pointing me in the right direction.