Corrupted renders on iOS devices are not completely fixed

Issue Summary

The problem reported in https://github.com/mathjax/MathJax/issues/2435 still occurs in some instances. As can be seen in the following image, the fix from issue 2435 is applied (mjx-container{will-change: opacity}), but the expression is still partly occluded:

I believe the initial fix (the one from 2021-06-09, with mjx-c::before{will-change: opacity}) was a bit better, because for my case it fixes 99% of the problem.

Steps to Reproduce:

Host the attached html somewhere
View it on an iOS
Click the button to toggle scale

There are several ways of fixing this... (I counted 9 methods, see the comments in the html).

Technical details:

MathJax Version: 3.2
Client OS: iOS 14.6
Device: iPhone 12 (on Browserstack)
Browser: Safari 14.0

I am using the following html file:

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <meta name='viewport' content='width=device-width, initial-scale=1' />
        <title>iOS MathJax Corruption</title>
        <script src='https://polyfill.io/v3/polyfill.min.js?features=es6'></script>
        <script id='MathJax-script' async src='https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js'></script>
        <style>
            #test {
                width: 100px;
                height: 100px;
                transform-origin: 0 0;
                /* Comment the following line to fix the problem. However, why would we accept this fix? */
                transition: transform 1ms;
            }

            .scaled {
                /* Comment the following line to fix the problem. However, why would we accept this fix? */
                transform: scale(4);
            }

            html {
                box-sizing: border-box;
                /* Comment the following line to fix the problem. However, why would we accept this fix? */
                font-family: sans-serif;
            }

            *, *::before, *::after {
                /* Comment the following line to fix the problem. However, why would we accept this fix? */
                /* Note: If we replace the value with `border-box`, the problem is fixed. Unbelievable. */
                box-sizing: inherit;
            }

            /* Uncomment the following line to fix the problem. However, the fix has a lag (happens after 1 second).*/
            /*mjx-container { will-change: unset !important; }*/

            /* Uncomment the following line to fix the problem. However, the top of the "O" is a bit cut.*/
            /*mjx-c::before { will-change: opacity; }*/

            /* Uncomment the following line to fix the problem. However, all symbols start snapping to pixels
            producing an ugly baseline asymmetry in some instances.*/
            /*mjx-c::before { transform: translateZ(0); }*/
        </style>
    </head>
    <body>
        <!-- If we add the symbol "1", the problem is fixed. However, why would we accept this fix? -->
        <!-- If we use inline math, the problem is fixed. However, why would we accept this fix? -->
        <div id='test'>$$\text{O}^2$$</div>
        <button>Click to toggle scale</button>
        <script>
            document.querySelector('button').addEventListener('click', () => {
                document.getElementById('test').classList.toggle('scaled');
            });
        </script>
    </body>
</html>