diff --git a/spec/text-editor-component-spec.js b/spec/text-editor-component-spec.js
index fb874a7aa..041eca4cb 100644
--- a/spec/text-editor-component-spec.js
+++ b/spec/text-editor-component-spec.js
@@ -1656,8 +1656,8 @@ describe('TextEditorComponent', function () {
       let item = document.createElement("div")
       item.className = className || ""
       let blockDecoration = editor.decorateMarker(
-        editor.markScreenPosition([screenRow, 0], invalidate: "never"),
-        type: "block", item: item
+        editor.markScreenPosition([screenRow, 0], {invalidate: "never"}),
+        {type: "block", item: item}
       )
       return [item, blockDecoration]
     }
@@ -1824,6 +1824,28 @@ describe('TextEditorComponent', function () {
       expect(component.lineNodeForScreenRow(1).dataset.screenRow).toBe("1")
       expect(component.lineNodeForScreenRow(2).dataset.screenRow).toBe("2")
     })
+
+    it('does not render highlights for off-screen lines until they come on-screen', async function () {
+      wrapperNode.style.height = 9 * lineHeightInPixels + 'px'
+      component.measureDimensions()
+      await nextViewUpdatePromise()
+
+      let [item, blockDecoration] = createBlockDecorationForScreenRowWith(0, {className: "decoration-1"})
+      atom.styles.addStyleSheet(
+        'atom-text-editor .decoration-1 { width: 30px; height: 30px; margin-top: 10px; margin-bottom: 5px; }',
+         {context: 'atom-text-editor'}
+      )
+
+      await nextAnimationFramePromise() // causes the DOM to update and to retrieve new styles
+      await nextAnimationFramePromise() // applies the changes
+
+      expect(component.tileNodesForLines()[0].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + 30 + 10 + 5 + "px")
+      expect(component.tileNodesForLines()[0].style.webkitTransform).toBe("translate3d(0px, 0px, 0px)")
+      expect(component.tileNodesForLines()[1].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + "px")
+      expect(component.tileNodesForLines()[1].style.webkitTransform).toBe(`translate3d(0px, ${component.tileNodesForLines()[0].offsetHeight}px, 0px)`)
+      expect(component.tileNodesForLines()[2].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + "px")
+      expect(component.tileNodesForLines()[2].style.webkitTransform).toBe(`translate3d(0px, ${component.tileNodesForLines()[0].offsetHeight + component.tileNodesForLines()[1].offsetHeight}px, 0px)`)
+    })
   })
 
   describe('highlight decoration rendering', function () {
@@ -3620,8 +3642,8 @@ describe('TextEditorComponent', function () {
         item.style.height = "30px"
         item.className = "decoration-1"
         editor.decorateMarker(
-          editor.markScreenPosition([0, 0], invalidate: "never"),
-          type: "block", item: item
+          editor.markScreenPosition([0, 0], {invalidate: "never"}),
+          {type: "block", item: item}
         )
 
         await nextViewUpdatePromise()
diff --git a/src/block-decorations-component.coffee b/src/block-decorations-component.coffee
index e9d80f2aa..0cfa7974f 100644
--- a/src/block-decorations-component.coffee
+++ b/src/block-decorations-component.coffee
@@ -39,11 +39,14 @@ class BlockDecorationsComponent
 
   measureBlockDecorations: ->
     for decorationId, blockDecorationNode of @blockDecorationNodesById
+      style = getComputedStyle(blockDecorationNode)
       decoration = @newState.blockDecorations[decorationId].decoration
+      marginBottom = parseInt(style.marginBottom) ? 0
+      marginTop = parseInt(style.marginTop) ? 0
       @presenter.setBlockDecorationDimensions(
         decoration,
         blockDecorationNode.offsetWidth,
-        blockDecorationNode.offsetHeight
+        blockDecorationNode.offsetHeight + marginTop + marginBottom
       )
 
   createAndAppendBlockDecorationNode: (id) ->