为何textarea设置spellcheck="false"会引发光标显示卡顿问题

问题解答 #

1. 是否为已知公开问题 #

这是Firefox浏览器长期存在的已知内核级问题，早在2012年就有对应bug提交记录，问题根源是拼写检查功能关闭后，Firefox的光标渲染逻辑缺少了光标位置变化时的闪烁周期重置触发机制。

2. 是React特有问题还是全局HTML通用问题 #

这是Firefox浏览器层面的通用HTML问题，和React框架完全无关。即使使用原生HTML编写spellcheck="false"的textarea元素，同样会复现该问题；Chromium内核的浏览器（如Brave、Chrome、Edge）均不存在该渲染逻辑缺陷。

3. 可用解决方案 #

这里提供两个无副作用的可行方案：

• 方案一：保留spellCheck="false"的配置，额外给textarea添加caret-color: auto的CSS样式。该属性会强制Firefox重置光标渲染逻辑，绝大多数场景下可以直接修复光标闪烁周期不重置的问题，没有任何视觉副作用。
• 方案二：将spellCheck属性固定设为true，同时添加CSS规则 textarea::spelling-error { text-decoration: none; }。该写法会完全隐藏拼写检查的红色波浪下划线，既保留了spellCheck开启时的光标正常渲染逻辑，又不会出现拼写提示的视觉干扰，也避免了动态切换spellCheck导致的下划线闪烁问题。

内容的提问来源于stack exchange，提问作者FlowRan