In my library jQuery Terminal I have issue with CSS on Codpen (ASCII art) when opening in Chrome Underscores is not always visible,
Codepen use iframe, I've tested locally and iframe looks ok. Codpen also looks ok in FireFox. If you open Codpen debug mode it also looks ok.
The CSS copied from developer tools (except ::selection)
.terminal .terminal-output div span {
display: inline-block;
}
.terminal .terminal-output > div:not(.raw) div {
white-space: nowrap;
}
.terminal .terminal-output > div > div {
min-height: calc(var(--size, 1) * 14px);
}
.terminal, .terminal-output > :not(.raw) span,
.terminal-output > :not(.raw) a,
.terminal-output > :not(.raw) div,
.cmd, .cmd span, .cmd div {
font-size: calc(var(--size, 1) * 12px);
line-height: calc(var(--size, 1) * 14px);
}
.terminal, .terminal-output > :not(.raw) span,
.terminal-output > :not(.raw) a,
.terminal-output > :not(.raw) div,
.cmd, .cmd span, .cmd div {
color: var(--color, #aaa);
background-color: var(--background, #000);
}
.terminal, .terminal-output > :not(.raw) span,
.terminal-output > :not(.raw) a,
.terminal-output > :not(.raw) div,
.cmd, .cmd span, .cmd div {
font-family: monospace;
color: #aaa;
background-color: #000;
font-size: 12px;
line-height: 14px;
}
.terminal .terminal-output > div:not(.raw) div {
white-space: nowrap;
}
Style Attribute {
--char-width: 7.23011;
}
.terminal, .cmd {
box-sizing: border-box;
cursor: text;
}
Here is the codepen https://codepen.io/jcubic/pen/wQjaZv not sure If this is only on Linux didn't tested this on MacOSX or Windows.
I can fix the issue by adding padding-bottom: 1px; or margin-bottom: 1px to .terminal-output > div > div but I want to know why this is happening? Why second line have underscores visible but not the first one?
I didn't use any reset or normalize css in this pen.
EDIT:
I've also have this css
/* FireFox hack */
@supports (-moz-animation: foo) {
.terminal,
.terminal .terminal-output > :not(.raw) span,
.terminal .terminal-output > :not(.raw) a,
.terminal .terminal-output > :not(.raw) div,
.cmd,
.cmd span,
.cmd div {
line-height: calc(var(--size, 1) * 13px);
}
}
that suppose to fix some firefox issue, but it seems it works without it.
When I investigated in dev tools in Chrome/Linux/Codpen I have ASCII art line that look like this (in computed style):
line div parent {
height: 13.9915px;
}
span child {
height: 13.6364px;
}
and in Firefox or in Chrome outside of Codepen (also in Debug mode outside of Codpen iFrame) I have:
line div parent {
height: 14px;
}
span child {
height: 14px;
}
and when I hover over line div I got height 15.
so the underscore is outside of div but I have this css:
.terminal .terminal-output > div > div {
min-height: calc(var(--size, 1) * 14px);
}
it it should be at least 14px, why it have 13.9915px?
I've did one more testing, I've cloned codepen editor and inserted debug page as iframe source, save it and uploaded to my server and it also work fine, the divs are not cut off and the height is 14px.
EDIT2:
I've resolved the issue by using:
.terminal .terminal-output > div > div {
min-height: calc(var(--size, 1) * 15px);
}
15px instead of 14px but still want to know why this is happening and why only on Codepen/Linux/Chromium.
