Repaint performance issue when removing the border on CodeMirror-gutters

[jasonsanjose]

In Brackets, we noticed a performance regression since we've upgraded to version 3. I've narrowed this down to the fact that we removed the default border-right: 1px solid #ddd; on CodeMirror-gutters.

I've reproduced this using a boilerplate CodeMirror demo here http://jsfiddle.net/jason_sanjose/zYeUJ/8/embedded/result/ and using the Chrome dev tools timeline to capture performance when typing a character in the editor.

The screen shot below shows a Paint event with a repaint region shown for the entire window. Normally, we should only see repaints for the new character, the line element and possibly the line gutter.

[marijnh]

Looks like some kind of weakness in Webkit's algorithm for determining what needs to be repainted. It appears that adding .CodeMirror-gutters { clear: both; } works around the problem. Could you test whether it also works for you? If so, I'll add it to the default stylesheet.

[jasonsanjose]

Hmm, that didn't work for me on Chrome 26.0.1410.65 on mac. You meant .CodeMirror-gutters { clear: both; border: none; } right? I tried that in developer tools with this demo http://codemirror.net/demo/resize.html and I still see the whole editor repaint.

[marijnh]

Indeed, that hack only seems to work for fixed-height editors. The underlying problem was that the gutter had height 100%, which apparently caused it to be repainted whenever the editor's insides briefly changed height during a resize (remove old line, add new line). Attached patch should fix this. It's slightly scary, since keeping sizing consistent by explicitly setting heights is always more fragile than letting the CSS engine handle it, but it does solve the problem.

[jasonsanjose]

Ah, that makes sense. That patch fixes my jsfiddle example. I'll try this out in Brackets.