The menu can't be dismissed when the mathfield has a transformed ancestor, or by a click on the mathfield #3111

Description

Once the menu of a mathfield is open, a click outside of it should close it. In two cases the menu stays open until an item is chosen:

1. The mathfield has an ancestor with transform, filter, mask-image, clip-path or contain: paint. These are common: scroll fades use mask-image, and animated cards use transform. A click outside of that ancestor leaves the menu open. The click also moves the focus out of the menu, so Escape no longer closes it either.
2. The click lands on the mathfield itself, including a second click on the menu toggle. This happens on a plain page, with no such ancestor.

Steps to Reproduce

<!doctype html>
<html>
<body style="margin: 40px; font: 20px sans-serif">
  <p>Text above</p>
  <!-- Any of these on an ancestor reproduces case 1:
       transform, filter, mask-image, clip-path, contain: paint -->
  <div style="transform: translateZ(0)">
    <math-field style="width: 300px">x^2+1</math-field>
  </div>
  <p>Text below the field</p>
  <script type="module" src="https://unpkg.com/mathlive@0.111.1/mathlive.min.mjs"></script>
</body>
</html>

1. Click the menu toggle. The menu opens.
2. Click "Text below the field".
3. Press Escape.
4. Remove the transform, reload, and repeat steps 1 and 2.
5. With or without the transform, open the menu, then click the text of the mathfield, or the menu toggle again.

Actual Behavior

• Step 2: the menu stays open.
• Step 3: the menu stays open, because the click in step 2 moved the focus to the page.
• Step 4: the menu closes, so the transform is what keeps it open in step 2.
• Step 5: the menu stays open.

Each cell below opens the menu with the toggle, then makes one click. The last column presses Escape after a click outside.

Expected Behavior

Any click outside of the menu closes it, whatever the ancestors of the mathfield. A click on the mathfield closes it, and so does a second click on the menu toggle.

Environment

MathLive version 0.111.1, and master at 8d148b4.

I have not checked whether this is a regression.

Operating System macOS 15

Browser Chrome, Firefox and Safari (the Chromium, Firefox and WebKit builds of Playwright 1.63). All three behave as in the table, except that WebKit does not clip clicks with mask-image.

A fix is in #3110.