diff --git a/components/dialog/dialog-styles.js b/components/dialog/dialog-styles.js
index 56303775667..877530228a4 100644
--- a/components/dialog/dialog-styles.js
+++ b/components/dialog/dialog-styles.js
@@ -68,9 +68,14 @@ export const dialogStyles = css`
color: var(--d2l-theme-text-color-static-standard);
margin-bottom: 0; /* required to override Chrome native positioning */
margin-top: 0; /* required to override Chrome native positioning */
+ overflow: hidden; /* override UA dialog:modal overflow: auto which causes an unexpected scrollbar from sub-pixel rounding */
padding: 0;
}
+ dialog.d2l-dialog-outer.d2l-dialog-outer-full-height {
+ height: auto; /* override UA dialog height: fix-content */
+ }
+
dialog::backdrop {
/* fallback is for old browsers (see https://caniuse.com/mdn-css_selectors_backdrop_inherit_from_originating_element) */
background-color: var(--d2l-theme-backdrop-background-color, #f9fbff);
diff --git a/components/dialog/test/dialog-confirm.vdiff.js b/components/dialog/test/dialog-confirm.vdiff.js
index 7c453b636eb..61162ff9108 100644
--- a/components/dialog/test/dialog-confirm.vdiff.js
+++ b/components/dialog/test/dialog-confirm.vdiff.js
@@ -73,6 +73,16 @@ describe('dialog-confirm', () => {
${buttons}
+ ` },
+ { name: 'slighty-larger-critical', template: html`
+
+ OK
+
+ ` },
+ { name: 'overflow', template: html`
+
+ ${buttons}
+
` }
].forEach(({ name, allColorModes, template }) => {
it(name, async() => {
diff --git a/components/dialog/test/golden/dialog-confirm/chromium/custom-internal-overflow.png b/components/dialog/test/golden/dialog-confirm/chromium/custom-internal-overflow.png
new file mode 100644
index 00000000000..1af4e668352
Binary files /dev/null and b/components/dialog/test/golden/dialog-confirm/chromium/custom-internal-overflow.png differ
diff --git a/components/dialog/test/golden/dialog-confirm/chromium/custom-internal-slighty-larger-critical.png b/components/dialog/test/golden/dialog-confirm/chromium/custom-internal-slighty-larger-critical.png
new file mode 100644
index 00000000000..bf232da8003
Binary files /dev/null and b/components/dialog/test/golden/dialog-confirm/chromium/custom-internal-slighty-larger-critical.png differ
diff --git a/components/dialog/test/golden/dialog-confirm/chromium/native-internal-critical.dark.png b/components/dialog/test/golden/dialog-confirm/chromium/native-internal-critical.dark.png
index 8565fefaee7..cb234b5d07e 100644
Binary files a/components/dialog/test/golden/dialog-confirm/chromium/native-internal-critical.dark.png and b/components/dialog/test/golden/dialog-confirm/chromium/native-internal-critical.dark.png differ
diff --git a/components/dialog/test/golden/dialog-confirm/chromium/native-internal-critical.png b/components/dialog/test/golden/dialog-confirm/chromium/native-internal-critical.png
index 2df365b0414..e317fa3aab5 100644
Binary files a/components/dialog/test/golden/dialog-confirm/chromium/native-internal-critical.png and b/components/dialog/test/golden/dialog-confirm/chromium/native-internal-critical.png differ
diff --git a/components/dialog/test/golden/dialog-confirm/chromium/native-internal-overflow.png b/components/dialog/test/golden/dialog-confirm/chromium/native-internal-overflow.png
new file mode 100644
index 00000000000..9c7b791ca72
Binary files /dev/null and b/components/dialog/test/golden/dialog-confirm/chromium/native-internal-overflow.png differ
diff --git a/components/dialog/test/golden/dialog-confirm/chromium/native-internal-slighty-larger-critical.png b/components/dialog/test/golden/dialog-confirm/chromium/native-internal-slighty-larger-critical.png
new file mode 100644
index 00000000000..13c5a83ab4d
Binary files /dev/null and b/components/dialog/test/golden/dialog-confirm/chromium/native-internal-slighty-larger-critical.png differ