From 0e8afc01757c3f1f8a5bf904e8cb857ea88bd7bf Mon Sep 17 00:00:00 2001
From: Elizabeth Mitchell <lizmitchell@google.com>
Date: Thu, 24 Aug 2023 11:59:41 -0700
Subject: [PATCH] fix: ripple and focus ring not centered in Safari

PiperOrigin-RevId: 559826221
---
 checkbox/internal/_checkbox.scss | 2 +-
 radio/internal/_radio.scss       | 2 +-
 slider/internal/_slider.scss     | 6 ++++--
 switch/internal/_handle.scss     | 3 ++-
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/checkbox/internal/_checkbox.scss b/checkbox/internal/_checkbox.scss
index e865e1f55..3549c8da2 100644
--- a/checkbox/internal/_checkbox.scss
+++ b/checkbox/internal/_checkbox.scss
@@ -113,7 +113,7 @@ $_checkmark-bottom-left: 7px, -14px;
 
   .container {
     border-radius: inherit;
-    display: grid;
+    display: flex;
     height: 100%;
     place-content: center;
     place-items: center;
diff --git a/radio/internal/_radio.scss b/radio/internal/_radio.scss
index 456238807..9823ff5d3 100644
--- a/radio/internal/_radio.scss
+++ b/radio/internal/_radio.scss
@@ -61,7 +61,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
   }
 
   .container {
-    display: grid;
+    display: flex;
     height: 100%;
     place-content: center;
     place-items: center;
diff --git a/slider/internal/_slider.scss b/slider/internal/_slider.scss
index e07378d82..47b5bbaa6 100644
--- a/slider/internal/_slider.scss
+++ b/slider/internal/_slider.scss
@@ -263,7 +263,8 @@ $_md-sys-shape: tokens.md-sys-shape-values();
     block-size: var(--_state-layer-size);
     inline-size: var(--_state-layer-size);
     border-radius: var(--_handle-shape);
-    display: grid;
+    display: flex;
+    place-content: center;
     place-items: center;
   }
 
@@ -316,8 +317,9 @@ $_md-sys-shape: tokens.md-sys-shape-values();
   .label {
     position: absolute;
     box-sizing: border-box;
-    display: grid;
+    display: flex;
     padding: 4px;
+    place-content: center;
     place-items: center;
     border-radius: map.get($_md-sys-shape, 'corner-full');
 
diff --git a/switch/internal/_handle.scss b/switch/internal/_handle.scss
index bb617263d..2fee40252 100644
--- a/switch/internal/_handle.scss
+++ b/switch/internal/_handle.scss
@@ -16,7 +16,8 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
 
 @mixin styles() {
   .handle-container {
-    display: grid;
+    display: flex;
+    place-content: center;
     place-items: center;
     position: relative;
     // this easing is custom to perform the "overshoot" animation