fix(line-numbers): line height will be zero when <pre> is hidden

[lynette-li]

When the <pre> element is hidden by default, lineNumberSizer.getBoundingClientRect().height will be 0.
When the user sets hidden to false,line numbers will be displayed as follows.This is not the expected display.

[RunDevelopment]

Can we assume that getComputedStyle(lineNumberSizer).lineHeight is equivalent to lineNumberSizer.getBoundingClientRect().height + 'px'? Especially cross browser?

(Line Numbers is one of our most-used plugins, so I don't want to break websites just because this change seems sound.)

[lynette-li]

How about we set lineSize to be lineNumberSizer.getBoundingClientRect().height + 'px' by default?Only when lineNumberSizer.getBoundingClientRect().height equals 0 will we set it to getComputedStyle(lineNumberSizer).lineHeight.

[lynette-li]

@RunDevelopment Request for your comments. :)

[RunDevelopment]

(Thanks for the reminder)

I tested your solution (without fallback) and it doesn't work with soft wrap.

Details

Should be:

I don't think there's a lot we can do to fix this. The browser needs to break and wrap the text for us.

[mAAdhaTTah]

Yeah, I don't think we should fix this internally. If the pre is display: none initially, my suggestion would be to rehighlight it when you reveal it. I'd be really hesitant to make this change cuz I'd definitely be concerned about breaking consumers.

@RunDevelopment I'd be ok with closing (we still appreciate the contribution!), but I'd like to hear your opinion given you've played with this.

[RunDevelopment]

@mAAdhaTTah I agree. Rehighlighting will trivially solve this issue (though it's a bit of a waste performance-wise).

I think we should rather focus on #2413. After this PR, we can let the browser do the positioning of line numbers (and line highlights), so we don't have to worry about this (and a few other issues) at all.