奇怪的彩虹＆＃39;填充了字符序列的输入字段的背景效果

Question

今天我有一个相当有趣的问题，这不是一个真正的问题，但我想知道为什么会这样。

我有一个输入字段，其css属性如下：

-webkit-appearance: none;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
-webkit-writing-mode: horizontal-tb;
background-color: rgb(255, 255, 255);
border-bottom-color: rgb(156, 189, 234);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(156, 189, 234);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(156, 189, 234);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(156, 189, 234);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-top-style: solid;
border-top-width: 1px;
box-sizing: border-box;
color: rgb(0, 0, 0);
cursor: auto;
display: block;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
height: 37px;
letter-spacing: normal;
line-height: normal;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 8px;
padding-left: 14px;
padding-right: 14px;
padding-top: 10px;
text-align: start;
text-indent: 0px;
text-shadow: none;
text-transform: none;
width: 365.875px;
word-spacing: 0px;
writing-mode: lr-tb;

如果我在输入字段中填入＆＃39; narrow＆＃39; （例如，我或j）字符我得到了这个很酷的效果：

如果我用更宽的字符填充它，它会按预期运行：

我已经发现如果我关闭font-family属性（在开发工具中），文本会再次正常运行。如果我改变文本颜色或背景颜色，彩虹效果会保持不变。

我能够在Chrome（Linux和Windows）和Firefox（Linux和Windows）上复制此问题。

你们对这种情况有什么看法吗？

干杯