Javascript 应用d3动画时，输入插入符号在Chrome中停止闪烁

输入字段中的插入符号不闪烁有问题。插入符号最初在输入字段中闪烁，但开始键入后将冻结。只有在元素上运行动画时才会发生这种情况。动画只是切换填充颜色。我准备了这把小提琴：

这只发生在Chrome和Opera中。Firefox和IE工作正常

---

有什么线索吗？

我用Chrome的timeline工具（开发工具下）在你的小提琴版本20上做了一个实验

我做了一些更改，触发动画，然后在浏览器有时间绘制插入符号时停止动画以高亮显示

在选定部分的开头，这是您的动画及其绘制（绿色方形）：我注意到浏览器从未同时重新绘制textfield的插入符号

选择结束后，浏览器重新绘制整个文本字段（绘制164x20），然后，±500毫秒后，插入符号的动画继续，并重新绘制（蓝色箭头）

对于更新后的小提琴，情况是一样的，插入符号似乎不是由浏览器或文本字段绘制的。

笔划的事情可能是一个很好的猜测，我查看了渲染对象，搜索了文档中出现的所有“笔划”：它可能会导致一些事情

---

我现在假设是Webkit的内部绘画优化（未在Opera上测试）造成了混乱-我稍后将对此进行深入讨论

在新版Chrome中，这似乎不再是一个问题。在Chrome版本66中测试。

我发现了更多的东西。仅当多边形设置了笔划属性或笔划宽度属性时，问题才会发生。我又准备了一个提琴：在我评论这两行之前，它还可以用。attr（“笔划”，“黑色”）/。attr（“笔划宽度”，1）看起来Chrome没有时间重新绘制插入符号。如果我将小提琴改为非连续动画，则插入符号有时会重新绘制。一个连续运行的动画会导致插入符号在整个应用程序中的任何输入字段中都不会闪烁，也不会在未更改的字段中闪烁。奇怪的是，这个问题只有在开始输入后才出现，在输入正常之前，当元素（多边形，矩形，…）有笔划时，这个问题才会出现。对此有解决方案吗？我明白了，但我不知道原因，它确实发生在你开始打字的时候，一旦发生，它对所有输入元素都是永久性的。@MarkRobbins不幸的是，没有：我没有从webkit的来源中找到它。

function setNewAnimation(){
    if (d3.select('.polyRect').attr('fill')=='#ff0000'){
        d3.select('.polyRect')
            .transition()
            .duration(1000)
            .attr('fill', '#00ff00')
            .each("end", setNewAnimation);
    }
    else{
        d3.select('.polyRect')
            .transition()
            .duration(1000)
            .attr('fill', '#ff0000')
            .each("end", setNewAnimation);
    }
}