Add a dedicated underlayer to avoid GPU artifacts on wrap guide etc

Trying to make the .highlights layer double as the .underlayer was
causing GPU artifacts on the wrap guide when the last highlight was
removed. This puts it in its own layer to avoid that.

src/editor-component.coffee

@@ -9,6 +9,7 @@ InputComponent = require './input-component'
 CursorsComponent = require './cursors-component'
 LinesComponent = require './lines-component'
 HighlightsComponent = require './highlights-component'
+UnderlayerComponent = require './underlayer-component'
 ScrollbarComponent = require './scrollbar-component'
 ScrollbarCornerComponent = require './scrollbar-corner-component'
 SubscriberMixin = require './subscriber-mixin'
@@ -110,6 +111,9 @@ EditorComponent = React.createClass
           editor, scrollTop, scrollLeft, scrollHeight, scrollWidth, highlightDecorations, lineHeightInPixels,
           defaultCharWidth, @scopedCharacterWidthsChangeCount
         }
+        UnderlayerComponent {
+          scrollTop, scrollLeft, scrollHeight, scrollWidth
+        }
 
       ScrollbarComponent
         ref: 'verticalScrollbar'

src/react-editor-view.coffee

@@ -34,7 +34,7 @@ class ReactEditorView extends View
     node = @component.getDOMNode()
 
     @scrollView = $(node).find('.scroll-view')
-    @underlayer = $(node).find('.highlights').addClass('underlayer')
+    @underlayer = $(node).find('.underlayer')
     @overlayer = $(node).find('.lines').addClass('overlayer')
     @hiddenInput = $(node).find('.hidden-input')
 

src/underlayer-component.coffee

@@ -0,0 +1,20 @@
+React = require 'react-atom-fork'
+{div} = require 'reactionary-atom-fork'
+{isEqualForProperties} = require 'underscore-plus'
+
+module.exports =
+UnderlayerComponent = React.createClass
+  displayName: 'UnderlayerComponent'
+
+  render: ->
+    if @isMounted()
+      {scrollTop, scrollLeft, scrollHeight, scrollWidth} = @props
+      style =
+        height: scrollHeight
+        width: scrollWidth
+        WebkitTransform: "translate3d(#{-scrollLeft}px, #{-scrollTop}px, 0px)"
+
+    div {className: 'underlayer', style}
+
+  shouldComponentUpdate: (newProps) ->
+    not isEqualForProperties(@props, newProps, 'scrollTop', 'scrollLeft', 'scrollHeight', 'scrollWidth')

static/editor.less

@@ -6,13 +6,14 @@
   .underlayer {
     position: absolute;
     top: 0;
-    bottom: 0;
     left: 0;
-    right: 0;
+  }
+
+  .highlights {
     z-index: -2;
   }
 
-  .lines, .highlights {
+  .lines, .highlights, .underlayer {
     min-width: 100%;
   }