fix(segment): avoid scrolling webkit bug (#28376)

Issue number: resolves #28373

---------


🚨 Reviewers: Please test this on Chrome, Firefox, and Safari

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The fix in
1167a9325f
uncovered a WebKit bug where scrolling an element using `scrollIntoView`
during an accelerated transition causes the segment to jump during the
transition. `scrollIntoView` can cause parent elements to also scroll,
and given that the entering view begins outside the viewport, it's
possible this triggered some sort of WebKit bug where it was trying to
scroll the element into view.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Updated the internal implementation to use `scrollBy` instead of
`scrollIntoView`. `scrollBy` does not attempt to scroll parent elements
which avoids the WebKit issue.
- I also updated the initial scroll to be instant rather than smoothly
scroll. If a segment is added to the DOM, I'd expect it to be added with
the correct scroll position (after the first render that is), so
animating on load seemed like a strange behavior. User interaction will
continue to use smooth scrolling though.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->


Dev build: `7.5.2-dev.11697638908.1f04980a`

core/src/components/segment/segment.tsx

@@ -145,7 +145,13 @@ export class Segment implements ComponentInterface {
      * before we can scroll.
      */
     raf(() => {
-      this.scrollActiveButtonIntoView();
+      /**
+       * When the segment loads for the first
+       * time we just want to snap the active button into
+       * place instead of scroll. Smooth scrolling should only
+       * happen when the user interacts with the segment.
+       */
+      this.scrollActiveButtonIntoView(false);
     });
 
     this.gesture = (await import('../../utils/gesture')).createGesture({
@@ -305,30 +311,52 @@ export class Segment implements ComponentInterface {
     }
   }
 
-  private scrollActiveButtonIntoView() {
-    const { scrollable, value } = this;
+  private scrollActiveButtonIntoView(smoothScroll = true) {
+    const { scrollable, value, el } = this;
 
     if (scrollable) {
       const buttons = this.getButtons();
       const activeButton = buttons.find((button) => button.value === value);
       if (activeButton !== undefined) {
-        /**
-         * Scrollable segment buttons should be
-         * centered within the view including
-         * buttons that are partially offscreen.
-         */
-        activeButton.scrollIntoView({
-          behavior: 'smooth',
-          inline: 'center',
+        const scrollContainerBox = el.getBoundingClientRect();
+        const activeButtonBox = activeButton.getBoundingClientRect();
 
-          /**
-           * Segment should scroll on the
-           * horizontal axis. `block: 'nearest'`
-           * ensures that the vertical axis
-           * does not scroll if the segment
-           * as a whole is already in view.
-           */
-          block: 'nearest',
+        /**
+         * Subtract the active button x position from the scroll
+         * container x position. This will give us the x position
+         * of the active button within the scroll container.
+         */
+        const activeButtonLeft = activeButtonBox.x - scrollContainerBox.x;
+
+        /**
+         * If we just used activeButtonLeft, then the active button
+         * would be aligned with the left edge of the scroll container.
+         * Instead, we want the segment button to be centered. As a result,
+         * we subtract half of the scroll container width. This will position
+         * the left edge of the active button at the midpoint of the scroll container.
+         * We then add half of the active button width. This will position the active
+         * button such that the midpoint of the active button is at the midpoint of the
+         * scroll container.
+         */
+        const centeredX = activeButtonLeft - scrollContainerBox.width / 2 + activeButtonBox.width / 2;
+
+        /**
+         * We intentionally use scrollBy here instead of scrollIntoView
+         * to avoid a WebKit bug where accelerated animations break
+         * when using scrollIntoView. Using scrollIntoView will cause the
+         * segment container to jump during the transition and then snap into place.
+         * This is because scrollIntoView can potentially cause parent element
+         * containers to also scroll. scrollBy does not have this same behavior, so
+         * we use this API instead.
+         *
+         * Note that if there is not enough scrolling space to center the element
+         * within the scroll container, the browser will attempt
+         * to center by as much as it can.
+         */
+        el.scrollBy({
+          top: 0,
+          left: centeredX,
+          behavior: smoothScroll ? 'smooth' : 'instant',
         });
       }
     }