From ea468ecbce00346c343a163962fe7689fd92c253 Mon Sep 17 00:00:00 2001
From: "Davide P. Cervone" <dpvc@union.edu>
Date: Wed, 17 Sep 2025 17:04:10 -0400
Subject: [PATCH] Update clip-path CSS to handler older browsers

---
 ts/output/chtml.ts             | 15 ++++++++++++---
 ts/output/chtml/Wrappers/mo.ts |  8 +++++---
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/ts/output/chtml.ts b/ts/output/chtml.ts
index 68bf483c0..cd48c9b15 100644
--- a/ts/output/chtml.ts
+++ b/ts/output/chtml.ts
@@ -110,13 +110,22 @@ export class CHTML<N, T, D> extends CommonOutputJax<
       'mjx-mtext > mjx-c',
     ].join(', ')]: {
       'clip-path':
-        'padding-box xywh(-1em -2px calc(100% + 2em) calc(100% + 4px))',
+        'padding-box polygon(' +
+        [
+          '-1em -2px',
+          'calc(100% + 1em) -2px',
+          'calc(100% + 1em) calc(100% + 2px)',
+          '-1em calc(100% + 2px)',
+        ].join(', ') +
+        ')',
     },
     'mjx-stretchy-h': {
-      'clip-path': 'padding-box xywh(0 -2px 100% calc(100% + 4px))',
+      'clip-path':
+        'padding-box polygon(0 -2px, 100% -2px, 100% calc(100% + 2px), 0 calc(100% + 2px))',
     },
     'mjx-stretchy-v': {
-      'clip-path': 'padding-box xywh(-2px 0 calc(100% + 4px) 100%)',
+      'clip-path':
+        'padding-box polygon(-2px 0, calc(100% + 2px) 0, calc(100% + 2px) 100%, -2px 100%)',
     },
 
     'mjx-container [space="1"]': { 'margin-left': '.111em' },
diff --git a/ts/output/chtml/Wrappers/mo.ts b/ts/output/chtml/Wrappers/mo.ts
index 6d5e06142..66d7af3f1 100644
--- a/ts/output/chtml/Wrappers/mo.ts
+++ b/ts/output/chtml/Wrappers/mo.ts
@@ -147,7 +147,8 @@ export const ChtmlMo = (function <N, T, D>(): ChtmlMoClass<N, T, D> {
         'text-align': 'right',
       },
       'mjx-stretchy-h > mjx-ext': {
-        'clip-path': 'padding-box xywh(0 -1em 100% calc(100% + 2em))',
+        'clip-path':
+          'padding-box polygon(0 -1em, 100% -1em, 100% calc(100% + 1em), 0 calc(100% + 1em))',
         width: '100%',
         border: '0px solid transparent',
         'box-sizing': 'border-box',
@@ -166,11 +167,12 @@ export const ChtmlMo = (function <N, T, D>(): ChtmlMoClass<N, T, D> {
         display: 'block',
       },
       'mjx-stretchy-v > mjx-ext': {
-        'clip-path': 'padding-box xywh(-1em 0 calc(100% + 2em) 100%)',
+        'clip-path':
+          'padding-box polygon(-1em 0, calc(100% + 1em) 0, calc(100% + 1em) 100%, -1em 100%)',
         height: '100%',
         border: '0.1px solid transparent',
         'box-sizing': 'border-box',
-        'white-space': 'wrap',
+        'white-space': 'pre',
       },
       'mjx-mark': {
         display: 'inline-block',