Description:
When applying a text shadow effect to a math-field using the CSS custom property --text-shadow, the shadow appears correctly on text content but is severely clipped on horizontal lines (fraction bars and sqrt overlines). This happens because these lines are contained within elements that have overflow: hidden, cutting off the box-shadow to the element's 1px height.
Steps to Reproduce:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/mathlive@0.109.0/mathlive.min.js"></script>
<style>
math-field {
font-size: 32px;
--text-shadow: 2px 2px 2px rgba(0,0,0,0.8);
}
</style>
</head>
<body>
<math-field>\frac{x}{5}\sqrt{x}</math-field>
</body>
</html>
Expected Behavior:
All elements including fraction bars and sqrt overlines should display the full, unobscured shadow with the specified blur radius.
Actual Behavior:
Text characters render the shadow correctly.
Fraction bars and sqrt overlines show only a faint 1px "ghost" line instead of the full shadow (see attached screenshot).
The shadow is clipped by the overflow: hidden property on parent containers (.ML__frac, .ML__sqrt).
Root Cause Analysis:
In the MathLive CSS (core.css), the line elements use:
.ML__frac-line, .ML__sqrt-line {
box-shadow: var(--text-shadow);
}
However, these lines are children of:
.ML__frac, .ML__sqrt {
overflow: hidden; /* This clips the shadow */
/* other styles */
}
Since the lines are only 1px high and the containers have strict overflow containment, any shadow blur extending beyond 1px is clipped.
Environment:
- MathLive version: 0.109.0
- Browser: Chrome 120, Firefox 121, Safari 17
- OS: macOS, Windows, Linux
Attachment naming suggestion:
- bug-clipped-shadow.png - screenshot showing the thin/washed out line shadow
- expected-full-shadow.png - screenshot showing how it should look
Description:
When applying a text shadow effect to a math-field using the CSS custom property --text-shadow, the shadow appears correctly on text content but is severely clipped on horizontal lines (fraction bars and sqrt overlines). This happens because these lines are contained within elements that have overflow: hidden, cutting off the box-shadow to the element's 1px height.
Steps to Reproduce:
Expected Behavior:
All elements including fraction bars and sqrt overlines should display the full, unobscured shadow with the specified blur radius.
Actual Behavior:
Text characters render the shadow correctly.
Fraction bars and sqrt overlines show only a faint 1px "ghost" line instead of the full shadow (see attached screenshot).
The shadow is clipped by the overflow: hidden property on parent containers (.ML__frac, .ML__sqrt).
Root Cause Analysis:
In the MathLive CSS (core.css), the line elements use:
However, these lines are children of:
Since the lines are only 1px high and the containers have strict overflow containment, any shadow blur extending beyond 1px is clipped.
Environment:
Attachment naming suggestion: