WRR-29169: Changed scroll animation method

[ion-andrusciac-lgp]

Checklist

• I have read and understand the contribution guide
• A CHANGELOG entry is included
• At least one test case is included for this feature or bug fix
• Documentation was added or is not needed
• This is an API breaking change

Issue Resolved / Feature Added

Changed scroll animation method

Resolution

Additional Considerations

After analysis, I've found that Chromium-based browsers have difficulty processing consecutive scroll animations using element.scrollTo({ behavior: 'smooth' }). This issue causes the scroll to become blocked. The issue is related to native scroll. In the sampler, the prop was never assigned and I fixed that.

I tested this in Storybook, created a separate sampler, tried to reduce the speed of the Accelerator, and also used a simple HTML file with a basic script that performed scroll on keyDown. The problem was consistently reproducible on Chromium, but worked without any issues on Firefox.

The final solution was to use requestAnimationFrame which, in turn, calls element.scrollTo() with behavior: 'auto'.  With this solution, it works fine on PC, but on the TV board with sideload, I observed that the scroll animation does not have 60 FPS; it's around 40 FPS, which I think may be a hardware limitation, but the scroll is not blocked.

Links

WRR-29169

Comments

Enact-DCO-1.0-Signed-off-by: Ion Andrusciac [email protected]

[codecov]

Codecov Report

❌ Patch coverage is 96.00000% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 82.24%. Comparing base (884a9b6) to head (42c9da2).
⚠️ Report is 13 commits behind head on develop.

Files with missing lines	Patch %	Lines
packages/ui/Scroller/ScrollerBasic.js	96.00%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #3350      +/-   ##
===========================================
+ Coverage    82.13%   82.24%   +0.10%     
===========================================
  Files          153      153              
  Lines         7127     7151      +24     
  Branches      1880     1885       +5     
===========================================
+ Hits          5854     5881      +27     
+ Misses         999      997       -2     
+ Partials       274      273       -1     

☔ 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.

[daniel-stoian-lgp]

closing in favour of #3353

[daniel-stoian-lgp]

Please add changelog

[daniel-stoian-lgp]

LGTM. Good job!