Cursor fade causes text flicker
Opened this issue · 5 comments
The fading/pulsing of the cursor with transition: opacity 0.3s appears to be causing text aliasing flicker in the project sidebar, but only if the main window is overlapping its content.
Forcing font-smoothing to the less desirable (IMO) setting of antialiased relieves the issue:
.tree-view {
-webkit-font-smoothing: antialiased;
}Forcing GPU rendering with something like -webkit-backface-visibility: hidden seems to have the same effect as the above.
Some helpful info here: http://jsbin.com/efirip/5/quiet. The text in the sidebar is indeed losing subpixel antialiasing when composited with the cursor's layer.
Unfortunately messing with the z-index of the cursor or overlayer hasn't helped so far.
This will be fixed with the react-editor too. There is an option in the settings to use the new editor, but it's a bit buggy right now.
With the current editor, the whole thing repaints on cursor blink, but with the new editor, repaints are constrained to the things that actually change!
@benogle Nice. I did try out React the other night, and am excited about the progress there. One thing I noticed is that text in the editor definitely loses subpixel antialiasing as a consequence of moving it to the GPU. Is that going to be webkit-imposed limitation for now? A shame if so - I've gotten so used to seeing subpixel antialiased text in OS X that it's very noticeable when it's gone!
@benogle nvm, learning what I wanted to know from @nathansobo's PR: atom/atom#2258