Transcription and translation alignment fails at non-100% zoom levels

[blms]

Testing notes (QA)

On the QA public site:

• Bump your browser zoom up a notch or two past 100%. (Usually cmd +, or ctrl + on Windows.) Navigate to some document detail pages with both transcriptions and translations. They should be aligned correctly.
• Try the same with browser zoomed out lower than 100%. Again, they should be aligned correctly.
• Note that behavior is a little different if you zoom before navigating to the doc detail page, as opposed to zooming when you're already on the page. Both should work correctly.
• This should work in all three major browsers: Chrome, Safari, and Firefox.

---

When a document detail page with both a transcription and translation is first loaded, if the browser's zoom is not 100%, this will happen:

We've encountered this in the past, and the solution was just to set your browser to 100%, but it makes sense to have this open as a bug since it should not behave this way.

The solution probably lies somewhere in this calculation:

geniza/sitemedia/js/controllers/ittpanel_controller.js

Lines 96 to 103 in ccc8f03

	getLineCount(el) {
	// determine the number of lines by dividing element's rendered height
	// by its computed line height from CSS, and applying a floor function
	return Math.floor(
	el.getBoundingClientRect().height /
	parseInt(getComputedStyle(el).getPropertyValue("line-height"))
	);
	}