search

souporserious / get-node-dimensions

Get accurate element dimensions, even if it's hidden!
MIT License
20 stars 5 forks source link

Cloning media elementes leads to additional network requests #12

Open tf opened 5 years ago

tf commented 5 years ago

I noticed this issue when I was using react-measure on a piece of DOM that contained a video tag with preload attribute set to "auto". During an animation, getNodeDimensions was called while the measured element was already display: none. The measured dimensions were therefore zero, which causes a fallback to getCloneDimensions. In Firefox 67 the cloned video tag then triggered a separate preload request. In my case this happened quite often and caused hitting the Network.http.max-persistent-connections-per-server limit. This then prevented other videos on the page from loading properly.

As a workaround I added an option to prevent the fallback to cloning. The name of the option is quite terrible, but I could not think of anything more descriptive.

I am wondering if this automatic fallback to cloning really makes sense. Maybe instead, there should be an option to opt-in to the fallback. That would of course be a breaking change.

I also saw that the 3.0 pre relases of react-measure no longer depend on this library. So this issue might not be a priority? Just wanted to document my findings in case somebody else runs into the problem.

souporserious commented 5 years ago

Ah, interesting! I haven't come across this yet, but it makes total sense. I appreciate the detailed answer 🙏. It seems worth it to mention this in the README. As for react-measure V2, it doesn't actually use get-node-dimensions. I just realized it's listed in dependencies when it shouldn't be 😅.