bvaughn / react-virtualized-auto-sizer

Sometimes Chrome reports a height that has decimals, but autosizer will return the next integer number, therefore resulting in more space than what's available on screen. At the moment I'm solving it by always removing one to the result returned by autosize, but if I could get the height as reported by Chrome with the decimals, the problem would be solved even if it's passed as pixels to CSS.

I'm not sure what's being requested. AutoSizer returns the bounding client rect width/height as well as the offsetWidth/offsetHeight:

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

Lines 199 to 203 in c644cfd

    
           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;

The only rounding that's being done is for padding:

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

Lines 192 to 196 in c644cfd

    
           const style = window.getComputedStyle(this._parentNode) || {}; 
        
           const paddingLeft = parseInt(style.paddingLeft ?? "0", 10); 
        
           const paddingRight = parseInt(style.paddingRight ?? "0", 10); 
        
           const paddingTop = parseInt(style.paddingTop ?? "0", 10); 
        
           const paddingBottom = parseInt(style.paddingBottom ?? "0", 10);

Is that where the decimal values are coming from? (Can you provide some sort of repro?)

It might be the rounding happening in the paddings then, since Chrome is reporting the paddings with decimals, but the final height returned by auto-sizer came back as an integer, causing the original issue with the scrollbars appearing. Picture attached:

Can you share a repro? Screenshots aren't really that helpful when it comes to verifying fixes.

I'm afraid I don't, I ended up removing the library a couple of weeks ago due to the rounded sizes when Chrome reported decimals, since it was causing scrollbars to appear in the container as mentioned above. In any case if I find myself needing the library again I know where the issue is. Thanks

Okay, that's fair.

For anyone else who stumbles upon this– the issue has been fixed in 1.0.17

is it the same issue where the scroll bar flikers?

	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;

	const style = window.getComputedStyle(this._parentNode) \|\| {};
	const paddingLeft = parseInt(style.paddingLeft ?? "0", 10);
	const paddingRight = parseInt(style.paddingRight ?? "0", 10);
	const paddingTop = parseInt(style.paddingTop ?? "0", 10);
	const paddingBottom = parseInt(style.paddingBottom ?? "0", 10);

Reporting an integer size when the available space has decimals