arnog
Context Menu Positioning Issue with <math-field> Inside <foreignObject> in SVG
Description:
I'm encountering an issue with MathLive (version 0.104.0) when using a <math-field> element inside a <foreignObject> within an SVG. The context menu appears, but it is incorrectly positioned—clipped and aligned to the bottom-right corner of the
Steps to Reproduce:
- Create an SVG with a
<foreignObject>element. - Place a
<math-field>inside the<foreignObject>. - Right-click on the
<math-field>or click the menu icon to open the context menu.
Example Code:
<!DOCTYPE html>
<html>
<head>
<script defer src="https://unpkg.com/[email protected]/dist/mathlive.min.js"></script>
<style>
foreignObject { overflow: visible; }
</style>
</head>
<body>
<svg width="3000" height="3000" xmlns="http://www.w3.org/2000/svg">
<foreignObject x="100" y="100" width="300" height="300">
<math-field xmlns:xhtml="http://www.w3.org/1999/xhtml>f(x) = x^2</math-field>
</foreignObject>
</svg>
</body>
</html>
Expected Behavior:
The context menu should appear near the <math-field> element, correctly positioned relative to its location within the SVG.
Actual Behavior:
The context menu is displayed at the bottom-right corner of the <svg> element and is partially clipped, ignoring the position of the <math-field> within the <foreignObject>.
Sample Screenshot:
Environment:
MathLive version: 0.104.0 Browser: [Chrome 134.0.6998.89, Firefox 136.0.1, Opera 117.0.5408.93] OS: [Windows 11]
Additional Information:
Moving the <math-field> outside the SVG (e.g., into a <div>) resolves the issue, but this is not ideal for my use case.
Suggested Fix:
It seems the context menu's absolute positioning does not account for the SVG's coordinate system or the <foreignObject> offset. Adjusting the menu's position calculation to respect the <math-field>'s bounding box relative to the SVG might resolve this.
Thank you for looking into this! Let me know if you need more details.
