Fix: scrollTo not working on Safari 15.4

[hellofanny]

Ported from https://github.com/vtex-sites/nextjs.store/pull/132

What's the purpose of this pull request?

This PR attempts to fix two issues:

1. scroll-behavior not working on Safari 15.4 when using scrollTop: https://developer.apple.com/forums/thread/703294
   
2. Not scrolling to the last image position.
   

How does it work?

1. This issue could also be fixed g the scroll-behavior: smooth property. But after aligning with the design team, we favor the workaround approach with a smooth's effect. We should keep an eye out for safari updates and remove them when the native approach is available.

2. Increased a little the threshold, but it won't work for all the cases. It needs further improvements and should be tackled at another moment.

How to test it?

1. Open this preview link on Safari.
2. Click on the Down Arrow button, scroll should work, and you'll see more images' thumbnails.

References

• https://developer.apple.com/forums/thread/703294
• REGRESSION: CSS scroll-behavior: smooth with overflow: hidden breaks JS scrollTo/scrollLeft/scrollTop WebKit/WebKit#1387
• https://developer.apple.com/documentation/safari-release-notes
• https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

Changelog

• Added an entry in the CHANGELOG.md at the beginning of its due section. The latest version should comes first.
• Added the PR number with the PR link at the entry in the CHANGELOG.md. E.g., New items in the pull_request_template.md (#12)

PR Description

• Added a label according to the PR goal - Breaking change, Enhancement, Bug or Chore.
• Added the component, hook, or pathname in-between backticks (``) - If applicable. E.g., ComponentName component.
• Identified the function or parameter in the PR - If applicable. E.g., useWindowDimensions hook.

Documentation

• PR description
• Added to/Updated the Storybook - if applicable.
• For documentation changes, ping @ carolinamenezes, @ PedroAntunesCosta or @ Mariana-Caetano to review and update.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
gatsby-store-storybook	✅ Ready (Inspect)	Visit Preview	Jun 24, 2022 at 1:19AM (UTC)

[vtex-sites]

Preview is ready

This pull request generated a Preview

👀   Preview: https://sfj-65be695--gatsby.preview.vtex.app
🔬   Go deeper by inspecting the Build Logs
📝   based on commit 65be695

[vtex-sites]

Lighthouse Reports

Here are the Lighthouse reports of this Pull Request

📝 Based on commit 65be695

Lighthouse Report by page
📎   /
📎   /apple-magic-mouse/p
📎   /office