jashkenas/coffeescript

Site issue: code blocks twitch on hover

Inve1951 opened this issue · 2 comments

There's a new visual issue with https://coffeescript.org.

The first time you hover some code block CodeMirror kicks in. When it does that it incorrectly overrides a CSS rule.

/* before */
.CodeMirror pre {
    line-height: 1.4em;
}

/* after */
.CodeMirror pre.CodeMirror-line {
    line-height: inherit;
}

On my device this reduces the effective line height from 19.6px to 17.5px, shrinking the vertical size of the code block.

But there's something else wrong too. Even with that rule disabled, most of the time CodeMirror kicks in, the container grows 1px in height.

Tested on Firefox.

Okay, can you suggest a fix?

Depends on what broke it. I haven't experienced this before so something must have changed. Question is what. I doubt that it's caused by browser updates this time around.