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:
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:
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
widthof 551px. Putting a 551px-wide div into a 550.6px-wide div causes horizontal scrollbars, of course.I've seen some existing related issues:
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
widthis rounded to the nearest integer: