Skip to content

Instantly share code, notes, and snippets.

@mortenpi mortenpi/katex-bug.html
Last active Jun 12, 2019

Embed
What would you like to do?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KaTeX rendering bug example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.css" integrity="sha384-yFRtMMDnQtDRO8rLpMIKrtPCD5jdktao2TV19YiZYWMDkUR5GQZR/NOVTdquEx1j" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.js" integrity="sha384-9Nhn55MVVN0/4OFx7EE5kpFBPsEMZxKTCnA+4fqDmg12eCTqGi6+BB2LjY8brQxJ" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
<style>
#container {
height: 60vh;
border: 1px solid black;
overflow-y: scroll;
padding: 1rem;
}
.quarter-block {
height: 25vh;
border-left: 1px dashed black;
margin: 1rem 0;
text-align: center;
}
</style>
<style id="fixedstyle" onload="this.disabled = true;">
.katex .katex-mathml {
position: fixed;
}
</style>
</head>
<body>
<h1>KaTeX rendering bug example</h1>
<div id="container">
<h1>Some filler content</h1>
<p class="quarter-block">...</p>
<p class="quarter-block">...</p>
<p class="quarter-block">...</p>
<p class="quarter-block">...</p>
<h2>Equation comes here</h2>
\[ E = mc^2 \]
<h2>Maybe more content</h2>
<p class="quarter-block">...</p>
<p class="quarter-block">...</p>
</div>
<p>
As all the content is in a scrollable container, the outer main viewport should not scroll.
</p>
<p>
But the <code>position: absolute;</code> in the <code>.katex .katex-mathml</code> class creates elements that exist outside the scrollable container, but are positioned far down on the page.
</p>
<p>
The offender is the <code>&lt;span class="katex-mathml"&gt;</code> element, a child of the equation span.
</p>
<button onclick="document.getElementById('fixedstyle').disabled = false;">Set <code>position</code> to <code>fixed</code></button>
<button onclick="document.getElementById('fixedstyle').disabled = true;">Set <code>position</code> back to default (<code>fixed</code>)</button>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.