search

devrelm / resize-observer

Other
98 stars 12 forks source link

entries -> height returning NaN #19

Open samdenty opened 5 years ago

samdenty commented 5 years ago

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 commented 5 years ago

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

marlon-tucker commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

Thanks!

devrelm commented 5 years ago

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.