Resizing with percentage width causes handle to drift from mouse position

[jinxiangqiang]

Bug: Resizing with percentage width causes handle to drift from mouse position

Description

When using percentage width (e.g. width: "50%"), dragging the resize handle causes it to drift away from the mouse cursor. The drift gets worse with each resize operation, making it difficult to achieve precise sizing.

Steps to reproduce

1. Create a resizable component with percentage width:

<th>
 <Resizable
  size={{ width: "100%", height: "100%" }}
  minWidth={80}
  style={{ position: 'absolute' }}
  >
</th>

2. Try to resize the component by dragging the handle
3. Observe that:

• The handle position doesn't match the mouse cursor position
• The drift gets worse with each resize operation
• The final width after resizing may be incorrect

Expected behavior

• The resize handle should stay aligned with the mouse cursor during resize
• The final width should accurately reflect the mouse movement
• Percentage widths should be handled correctly, converting to pixels for resize operations

Actual behavior

• The resize handle drifts away from the mouse cursor
• The drift accumulates with each resize operation
• The final width may be incorrect due to percentage-to-pixel conversion issues

Environment

• re-resizable version: 6.10.3
• React version: 18.2.0
• Browser: Chrome 120.0.6099.216

Additional context

This appears to be related to how the component handles percentage-to-pixel conversion during resize operations. The component might need to:

1. Convert percentage to actual pixels before starting resize
2. Handle the resize operation in pixels
3. Convert back to percentage if needed after resize