fix: 修复overflowlist到某个临界宽度时会持续闪烁

[solarains]

Types of changes

• New feature
• Bug fix
• Enhancement
• Component style change
• Typescript definition change
• Documentation change
• Coding style change
• Refactoring
• Test cases
• Continuous integration
• Breaking change
• Others

Background and context

The OverflowList component experiences blinking when the container width is at certain threshold values. This occurs because of floating-point precision issues in width calculations, causing the component to rapidly switch between showing and hiding overflow items.

Solution

Added a tolerance value to prevent flickering at boundary conditions:

1. Introduced a TOLERANCE constant (0.5px):

const TOLERANCE = 0.5;

2. Modified width comparison logic in two critical places:

// First check: Whether recalculation is needed
if (spacerWidth > (1 + TOLERANCE) && 
    (overflowNumber.value === 0 || spacerWidth < (nextWidth.value - TOLERANCE))) {
  return;
}

// Second check: Whether an item fits in remaining space
if (itemWidth < remainingWidth - (1 + TOLERANCE)) {
  remainingWidth -= itemWidth;
  count += 1;
}

The tolerance value creates a small buffer zone (0.5px) around threshold values, preventing rapid state changes due to minor floating-point calculation differences.

How is the change tested?

Changelog

Component	Changelog(CN)	Changelog(EN)	Related issues
OverflowList	overflowlist到某个临界宽度时会持续闪烁	When the overflow list reaches a critical width, it will continue to blink

Checklist:

• Test suite passes (npm run test)
• Provide changelog for relevant changes (e.g. bug fixes and new features) if applicable.
• Changes are submitted to the appropriate branch (e.g. features should be submitted to feature branch and others
  should be submitted to main branch)

Other information

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview