Position cursors as layers relative to the viewport

src/cursor-component.coffee

@@ -6,8 +6,13 @@ CursorComponent = React.createClass
   displayName: 'CursorComponent'
 
   render: ->
-    {top, left, height, width} = @props.cursor.getPixelRect()
+    {cursor, scrollTop} = @props
+    {top, left, height, width} = cursor.getPixelRect()
+    top -= scrollTop
+
     className = 'cursor'
     className += ' blink-off' if @props.blinkOff
 
-    div className: className, style: {top, left, height, width}
+    WebkitTransform = "translate3d(#{left}px, #{top}px, 0px)"
+
+    div className: className, style: {height, width, WebkitTransform}

src/cursors-component.coffee

@@ -13,7 +13,7 @@ CursorsComponent = React.createClass
   cursorBlinkIntervalHandle: null
 
   render: ->
-    {editor} = @props
+    {editor, scrollTop} = @props
     blinkOff = @state.blinkCursorsOff
 
     div className: 'cursors',
@@ -21,7 +21,7 @@ CursorsComponent = React.createClass
         for selection in editor.getSelections()
           if selection.isEmpty() and editor.selectionIntersectsVisibleRowRange(selection)
             {cursor} = selection
-            CursorComponent({key: cursor.id, cursor, blinkOff})
+            CursorComponent({key: cursor.id, cursor, scrollTop, blinkOff})
 
   getInitialState: ->
     blinkCursorsOff: false

src/editor-scroll-view-component.coffee

@@ -33,7 +33,7 @@ EditorScrollViewComponent = React.createClass
         onFocus: onInputFocused
         onBlur: onInputBlurred
 
-      CursorsComponent({editor, cursorsMoved, cursorBlinkPeriod, cursorBlinkResumeDelay})
+      CursorsComponent({editor, scrollTop, cursorsMoved, cursorBlinkPeriod, cursorBlinkResumeDelay})
       LinesComponent {
         ref: 'lines', editor, fontSize, fontFamily, lineHeight, showIndentGuide,
         renderedRowRange, pendingChanges, scrollTop, scrollLeft, scrollingVertically