After changing the browser window size, a bug appears in the width calculation of react-grid-item.

[kkbda Guo]

Describe the bug

After changing the browser window size, a bug appears in the width calculation of react-grid-item.Here is my code

demo-adress: https://github.com/kkbda/grid-demo

And I also recorded a video。

Your Example Website or App

dev

Steps to Reproduce the Bug or Issue

1. pull my code and run
2. resize broswer

Expected behavior

width and height always correct

react-grid-layout library version

1.4.1

Operating System Version

MacBook Pro 13-inch, M1, 2020

Browser

Chrome

Additional context

No response

Screenshots or Videos

video2.mp4

[Samuel Reed]

This is relatively reasonable; there are many fractional sizes possible as you resize the browser, it's expected that grid items won't line up exactly to the subpixel.

If this is a problem for you, you could dive into:

react-grid-layout/lib/calculateUtils.js

Lines 37 to 90 in 8191403

 /** 
  * Return position on the page given an x, y, w, h. 
  * left, top, width, height are all in pixels. 
  * @param  {PositionParams} positionParams  Parameters of grid needed for coordinates calculations. 
  * @param  {Number}  x                      X coordinate in grid units. 
  * @param  {Number}  y                      Y coordinate in grid units. 
  * @param  {Number}  w                      W coordinate in grid units. 
  * @param  {Number}  h                      H coordinate in grid units. 
  * @return {Position}                       Object containing coords. 
  */ 
 export function calcGridItemPosition( 
   positionParams: PositionParams, 
   x: number, 
   y: number, 
   w: number, 
   h: number, 
   state: ?Object 
 ): Position { 
   const { margin, containerPadding, rowHeight } = positionParams; 
   const colWidth = calcGridColWidth(positionParams); 
   const out = {}; 
  
   // If resizing, use the exact width and height as returned from resizing callbacks. 
   if (state && state.resizing) { 
     out.width = Math.round(state.resizing.width); 
     out.height = Math.round(state.resizing.height); 
   } 
   // Otherwise, calculate from grid units. 
   else { 
     out.width = calcGridItemWHPx(w, colWidth, margin[0]); 
     out.height = calcGridItemWHPx(h, rowHeight, margin[1]); 
   } 
  
   // If dragging, use the exact width and height as returned from dragging callbacks. 
   if (state && state.dragging) { 
     out.top = Math.round(state.dragging.top); 
     out.left = Math.round(state.dragging.left); 
   } else if ( 
     state && 
     state.resizing && 
     typeof state.resizing.top === "number" && 
     typeof state.resizing.left === "number" 
   ) { 
     out.top = Math.round(state.resizing.top); 
     out.left = Math.round(state.resizing.left); 
   } 
   // Otherwise, calculate from grid units. 
   else { 
     out.top = Math.round((rowHeight + margin[1]) * y + containerPadding[1]); 
     out.left = Math.round((colWidth + margin[0]) * x + containerPadding[0]); 
   } 
  
   return out; 
 } 

[Krzysztof K.]

I have this same issue...

[usercao]

@STRML Thank you for your reply. What should I do if I want to correct this issue? Or can we only fork the repository to modify the source code?