[@visx/annotation] Label component has incorrect height in Firefox

[felix-kaestner]

Current Behavior
The Label component of the @visx/annotation package has incorrect height in Firefox.

Expected behavior
Label should have correct height.

Environment/Reproduction
URL: https://airbnb.io/visx/annotation
OS: Windows 10

Screenshots

Firefox Version 86.0.1:

Edge Version 89.0.774.50 (Chromium):

[WongyuChoi]

I wonder if there is an update on this issue.

[vovakulikov]

Hey @williaster

To be honest I don't have a clear understanding of this but it seems like react-use-measure doesn't work well with inner svg element within <Text />. I consider this problem came from how Firefox treats empty svg elements without width and height within another svg element with height and width (They usually have width 100% height 100% of parent even if we put size value from CSS width: 0px, height: 0px) and in the first render we're getting a really big value of Text svg height, so we're just stuck with this big initial height value here and therefore have this visual behaviour here.

My suggestion here, maybe we can move innerRef from text <svg /> element to <text /> element in <Text /> at @visx/text

I hope I will manage to prepare a small PR to check this idea.

сс: @felix-kaestner @WongyuChoi