From f0ae0fa47e144a5550d131552921a9d575b48810 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Thu, 19 Sep 2024 10:17:36 -0700
Subject: [PATCH 1/2] refactor(segment): update scrollActiveButtonIntoView

---
 core/src/components/segment/segment.tsx | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx
index 4c425e18b2e..e66545df026 100644
--- a/core/src/components/segment/segment.tsx
+++ b/core/src/components/segment/segment.tsx
@@ -340,6 +340,7 @@ export class Segment implements ComponentInterface {
          * scroll container.
          */
         const centeredX = activeButtonLeft - scrollContainerBox.width / 2 + activeButtonBox.width / 2;
+        console.log(centeredX);
 
         /**
          * We intentionally use scrollBy here instead of scrollIntoView
@@ -354,10 +355,24 @@ export class Segment implements ComponentInterface {
          * within the scroll container, the browser will attempt
          * to center by as much as it can.
          */
-        el.scrollBy({
-          top: 0,
-          left: centeredX,
+        // el.scrollBy({
+        //   top: 0,
+        //   left: centeredX,
+        //   behavior: smoothScroll ? 'smooth' : 'instant',
+        // });
+
+        activeButton.scrollIntoView({
           behavior: smoothScroll ? 'smooth' : 'instant',
+          inline: 'center',
+
+          /**
+           * 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',
         });
       }
     }

From 6e1f1d22645f92e2e833d04d7e499ac5e2dcc1a5 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Thu, 19 Sep 2024 13:26:56 -0700
Subject: [PATCH 2/2] refactor(segment): switch to scrollTo

Co-authored-by: rostislavcz <58735164+rostislavcz@users.noreply.github.com>
---
 core/src/components/segment/segment.tsx | 39 ++++++++++++-------------
 1 file changed, 19 insertions(+), 20 deletions(-)

diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx
index e66545df026..3ddf8645896 100644
--- a/core/src/components/segment/segment.tsx
+++ b/core/src/components/segment/segment.tsx
@@ -340,39 +340,38 @@ export class Segment implements ComponentInterface {
          * scroll container.
          */
         const centeredX = activeButtonLeft - scrollContainerBox.width / 2 + activeButtonBox.width / 2;
-        console.log(centeredX);
 
         /**
-         * We intentionally use scrollBy here instead of scrollIntoView
+         * newScrollPosition is the absolute scroll position that the
+         * container needs to move to in order to center the active button.
+         * It is calculated by adding the current scroll position
+         * (scrollLeft) to the offset needed to center the button
+         * (centeredX).
+         */
+        const newScrollPosition = el.scrollLeft + centeredX;
+
+        /**
+         * We intentionally use scrollTo 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
+         * containers to also scroll. scrollTo does not have this same behavior, so
          * we use this API instead.
          *
+         * scrollTo is used instead of scrollBy because there is a
+         * Webkit bug that causes scrollBy to not work smoothly when
+         * the active button is near the edge of the scroll container.
+         * This leads to the buttons to jump around during the transition.
+         *
          * 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',
-        // });
-
-        activeButton.scrollIntoView({
+        el.scrollTo({
+          top: 0,
+          left: newScrollPosition,
           behavior: smoothScroll ? 'smooth' : 'instant',
-          inline: 'center',
-
-          /**
-           * 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',
         });
       }
     }