Vue: katex.renderToString increases the height of the page

[kobayashi-dot]

I have a vue component like this:

<template>
    <div id="wrapper">
        <div id="container">
            <card v-for="n of Array(100).keys()" :key="n"></card>
        </div>
    </div>
</template>
<style scoped>
#container {
    max-width: 50%;
    overflow: scroll;
    height: 50vh;
    background-color: orange;
}

#wrapper {
    height: 100vh;
}
</style>

This generates 100 cards in the container. The Card is:

<template>
        <div ref="content">$$e^{i\pi}+1=0$$</div>
</template>
<script>
const katex = require('katex')
export default {
    mounted(){
        this.$refs.content.innerHTML = this.$refs.content.innerHTML.replace(/\$\$([^]*?)\$\$/g, function(outer, inner) {
            return katex.renderToString(inner, { displayMode: true})
        })
    },
}
</script>

However, this will create a blank space at the bottom of the page. How to remove it?

2021-06-27.18.19.09.mov

[edemaine]

Hmm, I don't see why KaTeX would cause that. Does element inspector reveal anything about the generated HTML/CSS? I suspect there is a different cause...

[kobayashi-dot]

If I change the line return katex.renderToString(inner, { displayMode: true}) to return 'Hello', the problem does not occur.

[edemaine]

What if you replace it with return '<div style="padding: 1em">Hello</div>'?

[kobayashi-dot]

In that case, the problem will not occur.

[edemaine]

Can you try return katex.renderToString(inner, { displayMode: true, output: 'html'})? My theory is that the MathML, which renders invisibly by constraining it to a 1x1 pixel box at some absolute coordinates, is causing the problem.

[kobayashi-dot]

It's fixed! Thank you.