Skip to content

fix: Sticky add tolerance when judging sticky state#347

Open
TinaPeach wants to merge 1 commit into
mainfrom
fix-sticky-tolerance
Open

fix: Sticky add tolerance when judging sticky state#347
TinaPeach wants to merge 1 commit into
mainfrom
fix-sticky-tolerance

Conversation

@TinaPeach
Copy link
Copy Markdown
Member

@TinaPeach TinaPeach commented Aug 29, 2025

This pull request addresses a UI issue with the Sticky component in index.tsx by introducing a tolerance threshold to prevent jitter during iOS damping animations. The main change is to adjust the sticky position calculations to be less sensitive to minor pixel differences, which helps avoid unwanted visual shaking on iOS devices.

Sticky positioning improvements:

  • Added a TOLERANCE constant to the sticky position calculations to avoid jitter caused by iOS damping animation, improving user experience on iOS devices.
  • Updated the logic for determining isTopSticky and isBottomSticky to include the tolerance threshold, making sticky state transitions smoother and less prone to flickering.

@adaex adaex requested a review from Copilot August 29, 2025 10:10
@codecov
Copy link
Copy Markdown

codecov Bot commented Aug 29, 2025

Codecov Report

❌ Patch coverage is 71.42857% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 90.27%. Comparing base (62ea305) to head (4523fd8).
⚠️ Report is 2 commits behind head on main.

Files with missing lines Patch % Lines
packages/arcodesign/components/sticky/index.tsx 71.42% 2 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main     #347      +/-   ##
==========================================
- Coverage   90.28%   90.27%   -0.01%     
==========================================
  Files         141      141              
  Lines        8498     8501       +3     
  Branches     3478     3480       +2     
==========================================
+ Hits         7672     7674       +2     
- Misses        803      804       +1     
  Partials       23       23              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR fixes jitter issues in the Sticky component by adding tolerance thresholds when determining sticky states, specifically targeting iOS damping animation problems.

  • Added a tolerance threshold (0.5px) to prevent jitter during iOS damping animations
  • Removed unnecessary Math.round() calls from distance calculations to preserve precision
  • Applied tolerance to both top and bottom sticky state calculations

Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.

);
// 使用容差阈值避免iOS阻尼动画时的抖动问题
// @en Tolerance threshold to avoid jitter problem in iOS damping animation
const TOLERANCE = 0.5;
Copy link

Copilot AI Aug 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The magic number 0.5 should be extracted to a named constant at the module level or made configurable through props. This would improve maintainability and allow fine-tuning if needed.

Copilot uses AI. Check for mistakes.
Comment on lines +232 to +233
? disFromTop <= topOffset + TOLERANCE &&
followBottom > containerTop + followOffset - TOLERANCE
Copy link

Copilot AI Aug 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The tolerance is being added to topOffset but subtracted from followOffset. This asymmetric application of tolerance could be confusing. Consider documenting why different directions are used or ensuring consistent application.

Suggested change
? disFromTop <= topOffset + TOLERANCE &&
followBottom > containerTop + followOffset - TOLERANCE
followBottom > containerTop + followOffset + TOLERANCE

Copilot uses AI. Check for mistakes.
@github-actions
Copy link
Copy Markdown

PR Preview Link: https://preview-347-arco-design-mobile.surge.sh

Copy link
Copy Markdown
Collaborator

@adaex adaex left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

应该问题不大

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants