<input>隐藏了在同一<textarea>（铬）中可见的文本的一部分

Question

我正在围绕瑞典研究人员通常使用的转录系统创建手语词典（针对瑞典手语语言）。转录是使用变音符号的Unicode字体实现的。

我有一个HTML input元素，用户可以在其中输入搜索查询。现在，如果用户通过输入一个变音符号开始，我希望能够向用户显示该变音符号，并且如果一个变音符号是在前面没有前面的基本字符的情况下写的，它将被放到左-我以为只是在文本输入元素中添加一些padding-left，以确保第一个字符即使是变音符号也可以看到。但是，Chromium不喜欢这样。 / p>

以下是Chromium中的外观图像。左边是（黄色）input元素，右边是（紫色）textarea元素（都包含相同的字符串）。 textarea显示期望的结果，而input元素在顶部和左侧截断变音符号。

如果检查元素，则会看到以下内容。 （文本在input元素的填充区域中被截断，而在textarea中则未被截断。）

如果可以的话，我宁愿使用input元素。

有什么方法可以设置input元素的样式，以便它不会在填充区域中截断我的文本？

在Firefox中，textarea两个输入元素看起来都相同，并且没有截断的情况不会出现此问题。

以下代码段也显示了该问题（至少在运行Chromium的情况下）。

@font-face {
  font-family: "FreeSans-SWL";
  src: url("https://zrajm.github.io/teckentranskription/freesans-swl.ttf");
}
input, textarea {
  font-family: "FreeSans-SWL";

  /* make textarea & input look the same */
  vertical-align: top;
  border: .25em inset #888;
  padding: .25em .5em;
}

<input value="???????">                     
<textarea rows=1>???????</textarea>