entries -> height returning NaN

[samdenty]

getComputedStyle->height is returning auto in https://github.com/pelotoncycle/resize-observer/blob/9641698c8ab52ae9715f0f08884ac1aca3c4c285/src/ContentRect.ts#L20

resulting in NaN as the output. getBoundingClientRect() returns the correct boundaries for the element. I'm presuming getComputedStyle is used for performance reasons, in which case it should fallback to using getBoundingClientRect->height

[samdenty]

Opened a PR here https://github.com/pelotoncycle/resize-observer/pull/20

[marlon-tucker]

getComputedStyle returns CSS height strings, for example 20px which is why parseFloat is failing. Unfortunately converting CSS heights into pixel values is not a trivial task..

An alternative method needs to be used for computing the content rectangle.

[devrelm]

@samdenty Thanks for opening a PR. Can you add tests to reproduce your issue? I don't doubt that it happens, but I have trouble figuring out when getComputedStyle(el).height would return 'auto'.

[samdenty]

@devrelm https://stackoverflow.com/q/8628005/5269570

There are a couple of things that can cause a result of "auto". You found one of them; display: none. If an element is inline it will also return auto.

[devrelm]

Thanks!

[devrelm]

I'll have to dig more into this. The ResizeObserver algorithm for calculating box size has updated since my last update to this package, so we'll have to do another round of updates and see how it shakes out.