scaledHeight + scaledWidth not documented - do they more than just not rounding?

[RoystonS]

I was just investigating a bug in our app where we were getting permanent horizontal scrollbars. It boiled down to a rounding issue where we had a div which was 550.6px wide, and AutoSizer was giving a width of 551px. Putting a 551px-wide div into a 550.6px-wide div causes horizontal scrollbars, of course.

I've seen some existing related issues:

• Reporting an integer size when the available space has decimals #57
• parentNode dimensions defining bug #6

Looking at the data coming out of AutoSizer, I see there's also a pair of 'scaled' properties (scaledWidth + scaledHeight). These appear to be unrounded, which is great. However, I can't see anything in any of the AutoSizer documentation about them. The 'scaled' names suggest that they might operate differently in different DPI environments or something similar, or are they merely unrounded versions of the true size?

Here's a CodeSandbox reproducing the reported values:
https://codesandbox.io/p/sandbox/t8y2r7?file=%2Fsrc%2FApp.tsx

and a screenshot showing AutoSizer running in both 400.4px and a 400.6px divs, showing how the width is rounded to the nearest integer:

[bvaughn]

Hey @RoystonS!

This is a great bug report. I really appreciate you're sharing all of that information.

So the width and height values are coming from here:

react-virtualized-auto-sizer/src/AutoSizer.ts

Lines 157 to 195 in 1898b07

	if (this._parentNode) {
	// Guard against AutoSizer component being removed from the DOM immediately after being added.
	// This can result in invalid style values which can result in NaN values if we don't handle them.
	// See issue #150 for more context.
	const style = window.getComputedStyle(this._parentNode) || {};
	const paddingLeft = parseFloat(style.paddingLeft || "0");
	const paddingRight = parseFloat(style.paddingRight || "0");
	const paddingTop = parseFloat(style.paddingTop || "0");
	const paddingBottom = parseFloat(style.paddingBottom || "0");
	const rect = this._parentNode.getBoundingClientRect();
	const scaledHeight = rect.height - paddingTop - paddingBottom;
	const scaledWidth = rect.width - paddingLeft - paddingRight;
	const height = this._parentNode.offsetHeight - paddingTop - paddingBottom;
	const width = this._parentNode.offsetWidth - paddingLeft - paddingRight;
	if (
	(!disableHeight &&
	(this.state.height !== height ||
	this.state.scaledHeight !== scaledHeight)) ||
	(!disableWidth &&
	(this.state.width !== width ||
	this.state.scaledWidth !== scaledWidth))
	) {
	this.setState({
	height,
	width,
	scaledHeight,
	scaledWidth,
	});
	if (typeof onResize === "function") {
	onResize({ height, scaledHeight, scaledWidth, width });
	}
	}
	}
	};

I'm using offsetWidth and offsetHeight which are integers. Maybe I should just use getBoundingClientRect for those values too. That would seemingly be safer/better.

What do you think?