Chrome latest version: Text child nodes of <details> are invisible between two MathJax containers

[hbghlyj]

Issue Summary

Using Chrome 131.0.6778.140, text child nodes of <details> are invisible between two MathJax containers.

Steps to Reproduce:

1. Goto https://jsbin.com/xunedamilu/edit?html,output
2. Click "Details" to expand it
3. Using Chrome, some text nodes are invisible:
   
4. Repeat using Firefox, the output is normal:
   
5. Replace "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js" with "https://cdn.jsdelivr.net/npm/[email protected]/tex-svg.js" and repeat.

Technical details:

• MathJax Version: 3.2.2 and 4.0.0-beta.7
• Client OS: Windows 11
• Browser: Chrome 131.0.6778.140 (latest version)

[hbghlyj]

The text nodes are present in DOM, but invisible.
e.g. the text node with content “, there are two solutions to ” between two MathJax containers is invisible:

[hbghlyj]

Maybe related to "Improvements to <details> and <summary>" in Chrome 131: https://developer.chrome.com/blog/new-in-chrome-131#styling-details

[marcobaez-zybooks]

Seeing the same problem on MacOS and Chrome v130/v132 (Beta). Created this super simple example:
https://codepen.io/marcobaez21/pen/raBMMNW

[marcobaez-zybooks]

@hbghlyj Have you also reported this to google chrome issues? Thank you!

Edit: Reported the issue here: https://issues.chromium.org/issues/383593255