From dd307b60b6afb36648cab4ea2342eb5ef7e5aeeb Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 5 Nov 2020 11:38:46 -0500
Subject: [PATCH] chore(): revert old segment fix in favor of new one (#22434)

This reverts commit 68afc49e9ed27acffb0b765b7be6b03e8574850d.
---
 core/src/components/segment-button/segment-button.ios.scss | 4 +++-
 core/src/components/segment-button/segment-button.scss     | 6 ++++--
 core/src/components/segment/segment.tsx                    | 2 +-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/core/src/components/segment-button/segment-button.ios.scss b/core/src/components/segment-button/segment-button.ios.scss
index 2624c3d296..57f4da6f29 100644
--- a/core/src/components/segment-button/segment-button.ios.scss
+++ b/core/src/components/segment-button/segment-button.ios.scss
@@ -38,7 +38,7 @@
   min-height: #{$segment-button-ios-min-height};
 
   // Necessary for the z-index to work properly
-  transform: translate(0, 0);
+  transform: translate3d(0, 0, 0);
 
   font-size: #{$segment-button-ios-font-size};
 
@@ -62,6 +62,8 @@
 
   content: "";
   opacity: 1;
+
+  will-change: opacity;
 }
 
 :host(:first-of-type)::before {
diff --git a/core/src/components/segment-button/segment-button.scss b/core/src/components/segment-button/segment-button.scss
index e9c492c055..2c6d1a1ef2 100644
--- a/core/src/components/segment-button/segment-button.scss
+++ b/core/src/components/segment-button/segment-button.scss
@@ -81,7 +81,7 @@
   @include text-inherit();
   @include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start));
   @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
-  @include transform(translate(0,0));
+  @include transform(translate3d(0,0,0));
 
   display: flex;
   position: relative;
@@ -270,6 +270,8 @@ ion-ripple-effect {
 
   box-sizing: border-box;
 
+  will-change: transform, opacity;
+
   pointer-events: none;
 }
 
@@ -304,4 +306,4 @@ ion-ripple-effect {
   .segment-button-indicator-animated {
     transition: none;
   }
-}
+}
\ No newline at end of file
diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx
index 5f07f991b3..33e633c051 100644
--- a/core/src/components/segment/segment.tsx
+++ b/core/src/components/segment/segment.tsx
@@ -260,7 +260,7 @@ export class Segment implements ComponentInterface {
 
     // Scale the indicator width to match the previous indicator width
     // and translate it on top of the previous indicator
-    const transform = `translate(${xPosition}px, 0) scaleX(${widthDelta})`;
+    const transform = `translate3d(${xPosition}px, 0, 0) scaleX(${widthDelta})`;
 
     writeTask(() => {
       // Remove the transition before positioning on top of the previous indicator