react-spring: height: 'auto' calculates incorrect height for some elements

Hi again! Looks like the height calculation in fixAuto is not ending up with the right height for some elements.

I’ve noticed that it happens with elements who have text that wraps and makes the height larger than it would otherwise be. Increasing the width of those elements to the point where the text no longer wraps results in the row being the correct height.

I have a suspicion that this is due to using clientHeight, which has bitten us a fair amount as well. We usually use getBoundingClientRect().height these days - might be worth a look!

Example:

screen shot 2018-04-30 at 3 43 25 pm

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 1
Comments: 16 (9 by maintainers)

Most upvoted comments

@dindonus

You can help it out a little by providing more context:

        <div style={{ position: 'relative'}}>
          <h1>
            <button onClick={toggle}>Toggle</button>
          </h1>
          <Spring from={{ height: 0 }} to={{ height: on ? "auto" : 0 }}>
            {styles => (
              <div style={{ ...styles, overflow: 'hidden' }}>

Now the lower div container is part of the parent-div instead of the app/root-div (in css absolute/relative is always relative to the previous container that’s absolute/relative, even if it’s not the direct parent). When it’s set to ‘absolute’ by react-spring for measurement it’ll retain bounds. I know this stuff can be confusing and i wish there’d be an easier way, but it’s css after all.

More on that here: https://github.com/drcmda/react-spring/blob/master/API-OVERVIEW.md#animating-auto

drcmda on Jun 6, 2018

@nathanmarks It’s out under @5.1.3, i actually thought i already did publish hence the close - must’ve been confused. 😵

drcmda on May 10, 2018