diff --git a/core/src/components/segment-button/segment-button.ios.scss b/core/src/components/segment-button/segment-button.ios.scss
index 57f4da6f29..2624c3d296 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: translate3d(0, 0, 0);
+  transform: translate(0, 0);
 
   font-size: #{$segment-button-ios-font-size};
 
@@ -62,8 +62,6 @@
 
   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 2c6d1a1ef2..e9c492c055 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(translate3d(0,0,0));
+  @include transform(translate(0,0));
 
   display: flex;
   position: relative;
@@ -270,8 +270,6 @@ ion-ripple-effect {
 
   box-sizing: border-box;
 
-  will-change: transform, opacity;
-
   pointer-events: none;
 }
 
@@ -306,4 +304,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 21ab3d034b..17b1e0d47d 100644
--- a/core/src/components/segment/segment.tsx
+++ b/core/src/components/segment/segment.tsx
@@ -244,7 +244,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 = `translate3d(${xPosition}px, 0, 0) scaleX(${widthDelta})`;
+    const transform = `translate(${xPosition}px, 0) scaleX(${widthDelta})`;
 
     writeTask(() => {
       // Remove the transition before positioning on top of the previous indicator