diff --git a/packages/multiple-choice/src/index.js b/packages/multiple-choice/src/index.js
index 079bc8e2a7..d209551bc6 100644
--- a/packages/multiple-choice/src/index.js
+++ b/packages/multiple-choice/src/index.js
@@ -79,7 +79,8 @@ export default class MultipleChoice extends HTMLElement {
             this._root = createRoot(this);
           }
           this._root.render(element);
-          queueMicrotask(() => {
+          // Use requestAnimationFrame to ensure DOM is fully painted before rendering math
+          requestAnimationFrame(() => {
             log('render complete - render math');
             renderMath(this);
           });
diff --git a/packages/multiple-choice/src/print.js b/packages/multiple-choice/src/print.js
index 56158a4fd9..0e7a6ddc1d 100644
--- a/packages/multiple-choice/src/print.js
+++ b/packages/multiple-choice/src/print.js
@@ -68,7 +68,9 @@ export default class MultipleChoicePrint extends HTMLElement {
             this._root = createRoot(this);
           }
           this._root.render(element);
-          queueMicrotask(() => {
+          // Use requestAnimationFrame to ensure DOM is fully painted before rendering math
+          // This is especially important for nested components like PreviewPrompt (rationale, choice labels)
+          requestAnimationFrame(() => {
             log('render complete - render math');
             renderMath(this);
           });