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

Question

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

http://jsfiddle.net/4bqkP/17/

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);
    }
}

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

有任何线索吗？

Answer 1

我已经使用Chrome的时间轴工具（在开发工具下）对您的小提琴的修订版20进行了实验。

我进行了一些更改，触发动画，然后在浏览器有时间绘制其插入符时停止突出显示。

在所选部分的开头，这是你的动画和它的颜色（绿色平方）：我观察到浏览器从不重新绘制文本字段的插入符号。

选择结束后，浏览器重新绘制整个文本区域（油漆164x20），然后，±500ms后，插入符号的动画继续，并重新绘制（蓝色箭头）。

在你更新的小提琴的情况下，同样的事情，插入符号似乎甚至没有被浏览器或文本字段绘制。

中风的事情可能是一个很好的猜测，我在Webkit sources上查看渲染对象，搜索文档中的所有“笔画”事件：它可能会导致某些事情！

我现在假设它是Webkit的内部绘画优化（未在Opera上测试），它会让我感到困惑 - 稍后我会深入了解它！

Answer 2

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