diff --git a/change/@fluentui-react-a80addea-99f6-4096-9383-b0b193004086.json b/change/@fluentui-react-a80addea-99f6-4096-9383-b0b193004086.json
new file mode 100644
index 0000000000000..bb97e2ca214a6
--- /dev/null
+++ b/change/@fluentui-react-a80addea-99f6-4096-9383-b0b193004086.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: prevent pixel-fraction overflow from TextField focus indicator",
+  "packageName": "@fluentui/react",
+  "email": "sarah.higley@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react/src/components/ColorPicker/__snapshots__/ColorPicker.test.tsx.snap b/packages/react/src/components/ColorPicker/__snapshots__/ColorPicker.test.tsx.snap
index da3d5322d73dd..a533c6502750a 100644
--- a/packages/react/src/components/ColorPicker/__snapshots__/ColorPicker.test.tsx.snap
+++ b/packages/react/src/components/ColorPicker/__snapshots__/ColorPicker.test.tsx.snap
@@ -390,6 +390,7 @@ exports[`ColorPicker renders correctly 1`] = `
                             margin-left: 0px;
                             margin-right: 0px;
                             margin-top: 0px;
+                            overflow: hidden;
                             padding-bottom: 0px;
                             padding-left: 0px;
                             padding-right: 0px;
@@ -556,6 +557,7 @@ exports[`ColorPicker renders correctly 1`] = `
                             margin-left: 0px;
                             margin-right: 0px;
                             margin-top: 0px;
+                            overflow: hidden;
                             padding-bottom: 0px;
                             padding-left: 0px;
                             padding-right: 0px;
@@ -722,6 +724,7 @@ exports[`ColorPicker renders correctly 1`] = `
                             margin-left: 0px;
                             margin-right: 0px;
                             margin-top: 0px;
+                            overflow: hidden;
                             padding-bottom: 0px;
                             padding-left: 0px;
                             padding-right: 0px;
@@ -888,6 +891,7 @@ exports[`ColorPicker renders correctly 1`] = `
                             margin-left: 0px;
                             margin-right: 0px;
                             margin-top: 0px;
+                            overflow: hidden;
                             padding-bottom: 0px;
                             padding-left: 0px;
                             padding-right: 0px;
@@ -1054,6 +1058,7 @@ exports[`ColorPicker renders correctly 1`] = `
                             margin-left: 0px;
                             margin-right: 0px;
                             margin-top: 0px;
+                            overflow: hidden;
                             padding-bottom: 0px;
                             padding-left: 0px;
                             padding-right: 0px;
@@ -1575,6 +1580,7 @@ exports[`ColorPicker renders correctly with preview 1`] = `
                             margin-left: 0px;
                             margin-right: 0px;
                             margin-top: 0px;
+                            overflow: hidden;
                             padding-bottom: 0px;
                             padding-left: 0px;
                             padding-right: 0px;
@@ -1741,6 +1747,7 @@ exports[`ColorPicker renders correctly with preview 1`] = `
                             margin-left: 0px;
                             margin-right: 0px;
                             margin-top: 0px;
+                            overflow: hidden;
                             padding-bottom: 0px;
                             padding-left: 0px;
                             padding-right: 0px;
@@ -1907,6 +1914,7 @@ exports[`ColorPicker renders correctly with preview 1`] = `
                             margin-left: 0px;
                             margin-right: 0px;
                             margin-top: 0px;
+                            overflow: hidden;
                             padding-bottom: 0px;
                             padding-left: 0px;
                             padding-right: 0px;
@@ -2073,6 +2081,7 @@ exports[`ColorPicker renders correctly with preview 1`] = `
                             margin-left: 0px;
                             margin-right: 0px;
                             margin-top: 0px;
+                            overflow: hidden;
                             padding-bottom: 0px;
                             padding-left: 0px;
                             padding-right: 0px;
@@ -2239,6 +2248,7 @@ exports[`ColorPicker renders correctly with preview 1`] = `
                             margin-left: 0px;
                             margin-right: 0px;
                             margin-top: 0px;
+                            overflow: hidden;
                             padding-bottom: 0px;
                             padding-left: 0px;
                             padding-right: 0px;
@@ -2740,6 +2750,7 @@ exports[`ColorPicker renders correctly with transparency 1`] = `
                             margin-left: 0px;
                             margin-right: 0px;
                             margin-top: 0px;
+                            overflow: hidden;
                             padding-bottom: 0px;
                             padding-left: 0px;
                             padding-right: 0px;
@@ -2906,6 +2917,7 @@ exports[`ColorPicker renders correctly with transparency 1`] = `
                             margin-left: 0px;
                             margin-right: 0px;
                             margin-top: 0px;
+                            overflow: hidden;
                             padding-bottom: 0px;
                             padding-left: 0px;
                             padding-right: 0px;
@@ -3072,6 +3084,7 @@ exports[`ColorPicker renders correctly with transparency 1`] = `
                             margin-left: 0px;
                             margin-right: 0px;
                             margin-top: 0px;
+                            overflow: hidden;
                             padding-bottom: 0px;
                             padding-left: 0px;
                             padding-right: 0px;
@@ -3238,6 +3251,7 @@ exports[`ColorPicker renders correctly with transparency 1`] = `
                             margin-left: 0px;
                             margin-right: 0px;
                             margin-top: 0px;
+                            overflow: hidden;
                             padding-bottom: 0px;
                             padding-left: 0px;
                             padding-right: 0px;
@@ -3404,6 +3418,7 @@ exports[`ColorPicker renders correctly with transparency 1`] = `
                             margin-left: 0px;
                             margin-right: 0px;
                             margin-top: 0px;
+                            overflow: hidden;
                             padding-bottom: 0px;
                             padding-left: 0px;
                             padding-right: 0px;
diff --git a/packages/react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap b/packages/react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap
index e42f7383c5f74..359ffd4757f98 100644
--- a/packages/react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap
+++ b/packages/react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap
@@ -72,6 +72,7 @@ exports[`DatePicker renders DatePicker allowing text input correctly 1`] = `
                 margin-left: 0px;
                 margin-right: 0px;
                 margin-top: 0px;
+                overflow: hidden;
                 padding-bottom: 0px;
                 padding-left: 0px;
                 padding-right: 0px;
@@ -301,6 +302,7 @@ exports[`DatePicker renders DatePicker with value correctly 1`] = `
                 margin-left: 0px;
                 margin-right: 0px;
                 margin-top: 0px;
+                overflow: hidden;
                 padding-bottom: 0px;
                 padding-left: 0px;
                 padding-right: 0px;
@@ -531,6 +533,7 @@ exports[`DatePicker renders default DatePicker correctly 1`] = `
                 margin-left: 0px;
                 margin-right: 0px;
                 margin-top: 0px;
+                overflow: hidden;
                 padding-bottom: 0px;
                 padding-left: 0px;
                 padding-right: 0px;
diff --git a/packages/react/src/components/TextField/MaskedTextField/__snapshots__/MaskedTextField.test.tsx.snap b/packages/react/src/components/TextField/MaskedTextField/__snapshots__/MaskedTextField.test.tsx.snap
index 0cef07b5be5e2..c9cc9bf6f4562 100644
--- a/packages/react/src/components/TextField/MaskedTextField/__snapshots__/MaskedTextField.test.tsx.snap
+++ b/packages/react/src/components/TextField/MaskedTextField/__snapshots__/MaskedTextField.test.tsx.snap
@@ -73,6 +73,7 @@ exports[`MaskedTextField renders correctly 1`] = `
             margin-left: 0px;
             margin-right: 0px;
             margin-top: 0px;
+            overflow: hidden;
             padding-bottom: 0px;
             padding-left: 0px;
             padding-right: 0px;
diff --git a/packages/react/src/components/TextField/TextField.styles.tsx b/packages/react/src/components/TextField/TextField.styles.tsx
index 20058d491eb13..38f2c5f95dfe5 100644
--- a/packages/react/src/components/TextField/TextField.styles.tsx
+++ b/packages/react/src/components/TextField/TextField.styles.tsx
@@ -200,6 +200,7 @@ export function getStyles(props: ITextFieldStyleProps): ITextFieldStyles {
         flexDirection: 'row',
         alignItems: 'stretch',
         position: 'relative',
+        overflow: 'hidden',
       },
       multiline && {
         minHeight: '60px',
diff --git a/packages/react/src/components/TextField/__snapshots__/TextField.test.tsx.snap b/packages/react/src/components/TextField/__snapshots__/TextField.test.tsx.snap
index 2e78231568c3a..1331502638014 100644
--- a/packages/react/src/components/TextField/__snapshots__/TextField.test.tsx.snap
+++ b/packages/react/src/components/TextField/__snapshots__/TextField.test.tsx.snap
@@ -75,6 +75,7 @@ exports[`TextField snapshots renders correctly 1`] = `
               margin-left: 0px;
               margin-right: 0px;
               margin-top: 0px;
+              overflow: hidden;
               padding-bottom: 0px;
               padding-left: 0px;
               padding-right: 0px;
@@ -261,6 +262,7 @@ exports[`TextField snapshots renders multiline correctly with errorMessage 1`] =
               margin-left: 0px;
               margin-right: 0px;
               margin-top: 0px;
+              overflow: hidden;
               padding-bottom: 0px;
               padding-left: 0px;
               padding-right: 0px;
@@ -512,6 +514,7 @@ exports[`TextField snapshots renders multiline correctly with props affecting st
               margin-left: 0px;
               margin-right: 0px;
               margin-top: 0px;
+              overflow: hidden;
               padding-bottom: 0px;
               padding-left: 0px;
               padding-right: 0px;
@@ -747,6 +750,7 @@ exports[`TextField snapshots renders multiline non resizable correctly 1`] = `
               margin-right: 0px;
               margin-top: 0px;
               min-height: 60px;
+              overflow: hidden;
               padding-bottom: 0px;
               padding-left: 0px;
               padding-right: 0px;
@@ -920,6 +924,7 @@ exports[`TextField snapshots renders multiline resizable correctly 1`] = `
               margin-right: 0px;
               margin-top: 0px;
               min-height: 60px;
+              overflow: hidden;
               padding-bottom: 0px;
               padding-left: 0px;
               padding-right: 0px;
@@ -1091,6 +1096,7 @@ exports[`TextField snapshots renders multiline with placeholder correctly 1`] =
               margin-right: 0px;
               margin-top: 0px;
               min-height: 60px;
+              overflow: hidden;
               padding-bottom: 0px;
               padding-left: 0px;
               padding-right: 0px;
@@ -1232,6 +1238,7 @@ exports[`TextField snapshots renders with reveal password button 1`] = `
               margin-left: 0px;
               margin-right: 0px;
               margin-top: 0px;
+              overflow: hidden;
               padding-bottom: 0px;
               padding-left: 0px;
               padding-right: 0px;
@@ -1514,6 +1521,7 @@ exports[`TextField snapshots should respect user component and subcomponent styl
               margin-left: 0px;
               margin-right: 0px;
               margin-top: 0px;
+              overflow: hidden;
               padding-bottom: 0px;
               padding-left: 0px;
               padding-right: 0px;