I am creating a basic text reading application with a line to aid in easy reading.
The functionality involves using the up and down arrow keys on the keyboard to adjust the position of a red line based on the line-height property. This is accomplished through the following function:
var line = example.$line[0],
$text = example.$text,
top = parseFloat(line.style.top).toFixed(1) / 1,
lineHeight = parseFloat($text.css('line-height')).toFixed(1) / 1;
// UP KEY PRESSED
if (move == 'up') {
line.style.top = (top - lineHeight) + 'px';
return;
}
// DOWN KEY PRESSED
if (move == 'down') {
line.style.top = (top + lineHeight) + 'px';
}
However, there are different outcomes observed only in Chrome browser. How can this issue be resolved?