输入焦点导致chrome中的字体模糊/抗锯齿

bpsygsoo  于 2023-03-27  发布在  Go
关注(0)|答案(1)|浏览(158)

当有输入时,Chrome中似乎有一些奇怪的反锯齿行为。当聚焦在输入内时,字体锯齿似乎会发生变化。根据字体的颜色,变化可能会更明显。更改-webkit-font-aliasing或其他属性似乎不会改变任何东西。
不专注:

专注:

这个错误不仅出现在tailwind reset中,这是第一个图像示例的来源,而且还出现在vanilla CSS中。
未聚焦:

专注:

<input type='text' />
<p>Something went wrong</p>
body {
  background: #000;
  color: #ccc;
}

链接到second example on jsfiddle is here
有没有办法解决这个模糊/删除它?
Chrome:版本111.0.5563.65(正式构建)(64位)

o2gm4chl

o2gm4chl1#

chrome 缺陷:https://bugs.chromium.org/p/chromium/issues/detail?id=1423434
尝试使用position: relative(或其他不是staticposition)作为<input/>的解决方法。
顺风样本:https://play.tailwindcss.com/4L5Q9u3qkK

相关问题