diff --git a/src/editor-component.coffee b/src/editor-component.coffee
index 4aa79bafc..e8b399da5 100644
--- a/src/editor-component.coffee
+++ b/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'
diff --git a/src/react-editor-view.coffee b/src/react-editor-view.coffee
index a363026e2..8c0b961d0 100644
--- a/src/react-editor-view.coffee
+++ b/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')
 
diff --git a/src/underlayer-component.coffee b/src/underlayer-component.coffee
new file mode 100644
index 000000000..cf106587a
--- /dev/null
+++ b/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')
diff --git a/static/editor.less b/static/editor.less
index acede6075..e4639327d 100644
--- a/static/editor.less
+++ b/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%;
   }