fix: Sticky add tolerance when judging sticky state#347
Conversation
Codecov Report❌ Patch coverage is
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. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
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; |
There was a problem hiding this comment.
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.
| ? disFromTop <= topOffset + TOLERANCE && | ||
| followBottom > containerTop + followOffset - TOLERANCE |
There was a problem hiding this comment.
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.
| ? disFromTop <= topOffset + TOLERANCE && | |
| followBottom > containerTop + followOffset - TOLERANCE | |
| followBottom > containerTop + followOffset + TOLERANCE |
|
✨ PR Preview Link: https://preview-347-arco-design-mobile.surge.sh |
This pull request addresses a UI issue with the
Stickycomponent inindex.tsxby 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:
TOLERANCEconstant to the sticky position calculations to avoid jitter caused by iOS damping animation, improving user experience on iOS devices.isTopStickyandisBottomStickyto include the tolerance threshold, making sticky state transitions smoother and less prone to flickering.