I am currently involved in a project centered around showcasing a variety of fonts to users for them to experiment with, allowing them to adjust size and spacing using sliders.
While the functionality works seamlessly on Chrome and Safari, a peculiar issue arises on Firefox where the text consistently jumps up and down within the input field as the size changes.
https://i.sstatic.net/gMKVC.gif
This jumping behavior seems to occur at regular intervals.
Edit
After simplifying my original code, here is the pertinent snippet. I've observed this "jumping" phenomenon while testing in Firefox.
// start
window.onload = setup;
function setup() {
sliderEventAssign("size-slider", fontSizeEvent);
}
// event handlers
function fontSizeEvent(event) {
var path = event.path || (event.composedPath && event.composedPath());
var root = path[3];
var value = round(event.target.value);
// update size value
root.getElementsByClassName("font-preview")[0].style.fontSize = value + "px";
root.getElementsByClassName("size-value")[0].innerText = value + " px";
}
// utils
function sliderEventAssign(selector, handler) {
var sliders = document.getElementsByClassName(selector);
Array.prototype.forEach.call(sliders, function (el) {
el.addEventListener('input', handler, false);
});
}
function round(a) {
return Math.round(a * 100) / 100;
}.interactive-font {
overflow: hidden;
font-size:20px;
min-height: 670px;
}
.interactive-font span, .interactive-font p {
cursor: default;
}
.tools {
display: grid;
grid-template-columns: 1fr 180px 240px 1fr 212px 145px 2fr;
grid-gap: 10px;
align-items: center;
font-family: sans-serif !important;
margin: auto 10px;
}
.shown .slider-wrapper {
display: block !important;
}
.font-preview {
width: 100%;
font-size: 250px;
display: block;
font-family: serif;
border:none;
background-image:none;
background-color:transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-appearance: none;
}
.font-preview::selection {
background-color: rgba(0,0,0,0.2);
}
.slider-value {
width: 80px;
align-self: center;
}
.size-slider {
width: 140px;
}
input:focus, button:focus {
outline: none;
} <div id="FontName" class="interactive-font">
<div class="tools">
<div class="slider-wrapper">
<input type="range" min="16" max="400" value="250" step="1"
class="slider size-slider" />
<span class="size-value slider-value">250 px</span>
</div>
</div>
<div class="text-field">
<input class="font-preview"
type="text" value="Hello"
spellcheck="false"
style="font-size: 250px;"/>
</div>
</div>I've also noticed that this issue arises when using serif fonts, but not with sans-serif
Any insights on what might be causing this problem? I've tried adjusting line-height and anchoring it to the bottom, but to no avail.
EDIT2
I will provide a video demonstration of how the problem manifests in the example above on my Firefox version 90.0.2 running on macOS 10.15.6 (MacBook Pro 16-inch, 2019).