KyleAMathews/react-headroom

not calculating innerHeight with child component in consideration

Joegrundman opened this issue · 2 comments

When passing in a react component as child, the child's height is not included in the calculated innerHeight on first render. If the screen is resized, the resize now calculates the innerHeight including the child component, causing offset issues.

any fix for this?

I made a work-around. In componentDidMount i call requestAnimationFrame with the callback firing a 'resize' event. requestAnimationFrame ensures that the css has finished being applied, then the triggered 'resize' event triggers a recalculation.

IIRC, I had to make a special case for the development environment. The additional events meant requestAnimationFrame was too soon, so i think i added a setTimeout callback for 100ms in development. Not great, but works