   displayName: 'LinesComponent'
 
   render: ->
-    div {className: 'lines'}
+    if @isMounted()
+      {editor, scrollTop, scrollLeft} = @props
+      style =
+        height: editor.getScrollHeight()
+        width: editor.getScrollWidth()
+        WebkitTransform: "translate3d(#{-scrollLeft}px, #{-scrollTop}px, 0px)"
+
+    div {className: 'lines editor-colors', style}
 
   getVisibleSelectionRegions: ->
     {editor, visibleRowRange, lineHeight} = @props

      delete @lineNodesByLineId[lineId]
      node.removeChild(lineNode)

  appendOrUpdateVisibleLineNodes: (visibleLines) ->
    {scrollTop, scrollLeft, lineHeight} = @props
    newLines = null
    newLinesHTML = null
    verticalScrollOffset = -scrollTop % lineHeight
    horizontalScrollOffset = -scrollLeft

    for line, index in visibleLines
      top = (index * lineHeight) + verticalScrollOffset
      left = horizontalScrollOffset

      if @hasLineNode(line.id)
        @updateLineNode(line, top, left)
      else
        newLines ?= []
        newLinesHTML ?= ""
        newLines.push(line)
        newLinesHTML += @buildLineHTML(line, top, left)

    return unless newLines?


  updateLines: ->
    {editor, visibleRowRange, showIndentGuide, selectionChanged} = @props
    [startRow, endRow] = visibleRowRange

    startRow = Math.max(0, startRow - 8)
    endRow = Math.min(editor.getLineCount(), endRow + 8)

    visibleLines = editor.linesForScreenRows(startRow, endRow - 1)
    @removeNonVisibleLineNodes(visibleLines)
    @appendOrUpdateVisibleLineNodes(visibleLines, startRow)

  removeNonVisibleLineNodes: (visibleLines) ->
    visibleLineIds = new Set
