Content flashes when there is mathjax on the page

[MrChaker]

Issue Summary

This is a very weird and rare bug , basically I'm using some complex css for a webpage , I needed a mechanism where I translate the page on X axis by some amount ( 1500px ) and immediatly scroll in X by same amount reversed so it looks like nothing happened .

This work perfectly in all platforms except for IOS where the content flashes for a moment , the problem is it only happens when the page has Mathjax on it , other pages work perfectly fine .

Steps to Reproduce:

1. Visit https://little-bo-peep-leptos-v2.fly.dev/article/ch_1 on an Iphone
2. There are some blue circles on the page , click on one
3. After animation ends/starts the content flashes
4. try with https://little-bo-peep-leptos-v2.fly.dev/article/ch_2 , there's no mathjax and content doesn't flash

Technical details:

• MathJax Version: 3.2
• Client OS: IOS
• Browser: Any

I am using the following MathJax configuration:

MathJax = {
  svg: {
    mtextInheritFont: true,
  },
  chtml: {
    mtextInheritFont: true,
  },
  tex: {
    inlineMath: [
      ["$", "$"],
      ["\\(", "\\)"],
    ],
    processEscapes: true,
    macros: {
      dblcol:
        "\\!\\rt{0.1}\\mathrel{\\raise.13ex{\\substack{\\small \\circ \\\\ \\small \\circ}}}",
      hc: "\\!\\rt{0.1}\\mathrel{\\raise.13ex{\\substack{\\small \\circ \\\\ \\small \\circ}}}",
      rr: "\\mathbb{R}",
      zz: "\\mathbb{Z}",
      nn: "\\mathbb{N}",
      ww: "\\mathbb{W}",
      qq: "\\mathbb{Q}",
      te: "\\text",
      dom: "\\text{dom}\\,",
      degree: "\\text{deg}\\,",
      f: "\\Rule{0.12em}{0.8pt}{-0.8pt}f",
      fsp: "\\hspace{0.06em}\\Rule{0.12em}{0.8pt}{-0.8pt}f",
      sp: "\\Rule{0.08em}{0.8pt}{-0.8pt}",
      ra: "\\rightarrow",
      back: "\\backslash",
      sqt: "{\\color{white} *\\!\\!\\!}",
      up: ["\\rule{0pt}{#1em}", 1], // vspace doesn't seem to work / exist ?
      dn: ["\\Rule{0pt}{0em}{#1em}", 1],
      rt: ["\\hspace{#1em}", 1],
      hlfbk: "\\!\\hspace{0.1em}",
      fl: ["\\lfloor #1 \\rfloor", 1],
      cl: ["\\lceil #1 \\rceil", 1],
      FL: ["\\left\\lfloor #1 \\right\\rfloor", 1],
      CL: ["\\left\\lceil #1 \\right\\rceil", 1],
      implies: "\\Longrightarrow",
      psa: "{}\\!\\hspace{0.0691em}",
      psb: "{}\\!\\hspace{0.06901311249137em}",
      ncdot: "\\re\\cdot\\re",
      re: "\\!\\hspace{0.1em}",
      bk: "\\!\\hspace{0.1em}",
      gbk: "\\!\\hspace{0.15em}",
      fw: "\\hspace{0.1em}",
      hfbk: "\\!\\hspace{0.2em}",
      deg: "\\circ",
      km: "[\\text{km}]",
      ddx: "{d \\over dx}\\hspace{0.1em}",
      ddt: "{d \\over dt}\\hspace{0.1em}",
      ddu: "{d \\over du}\\hspace{0.1em}",
      ddz: "{d \\over dz}\\hspace{0.1em}",
      ov: ["\\overline{#1}", 1],
      floor: ["\\lfloor{#1}\\rfloor", 1],
      faketextelement: "{\\color{white}\\text{*}}\\!\\!\\!\\rt{0.1}",
    },
  },
  options: {
    enableMenu: false,
  },
  loader: {
    load: ["[tex]/color"],
  },
  startup: {
    ready: () => {
      MathJax.startup.defaultReady();
      MathJax.startup.promise.then(() => {
        document.querySelectorAll(".hidden-on-startup").forEach((elem) => {
          elem.classList.remove("hidden-on-startup");
          elem.classList.add("animate-appear");
        });
      });
    },
  },
};

and loading MathJax via

<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>