From b386b00bc05e65660a42540b0d98e4cfd932fd45 Mon Sep 17 00:00:00 2001
From: Nathan Sobo <nathan@github.com>
Date: Tue, 9 Dec 2014 14:56:20 -0700
Subject: [PATCH] Wait for next animation frame before measuring when
 stylesheets change

Fixes #4479
---
 spec/text-editor-component-spec.coffee | 3 ++-
 src/text-editor-component.coffee       | 9 +++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/spec/text-editor-component-spec.coffee b/spec/text-editor-component-spec.coffee
index 6c4b365d6..7e0810ceb 100644
--- a/spec/text-editor-component-spec.coffee
+++ b/spec/text-editor-component-spec.coffee
@@ -1908,7 +1908,8 @@ describe "TextEditorComponent", ->
         }
       """, context: 'atom-text-editor'
 
-      nextAnimationFrame()
+      nextAnimationFrame() # handle stylesheet change event
+      nextAnimationFrame() # perform requested update
 
       scrollbarCornerNode = componentNode.querySelector('.scrollbar-corner')
       expect(verticalScrollbarNode.offsetWidth).toBe 8
diff --git a/src/text-editor-component.coffee b/src/text-editor-component.coffee
index 7e94deebd..616770452 100644
--- a/src/text-editor-component.coffee
+++ b/src/text-editor-component.coffee
@@ -664,8 +664,13 @@ TextEditorComponent = React.createClass
   onStylesheetsChanged: (styleElement) ->
     return unless @performedInitialMeasurement
     return unless atom.themes.isInitialLoadComplete()
-    @refreshScrollbars() if not styleElement.sheet? or @containsScrollbarSelector(styleElement.sheet)
-    @handleStylingChange()
+
+    # This delay prevents the styling from going haywire when stylesheets are
+    # reloaded in dev mode. It seems like a workaround for a browser bug, but
+    # not totally sure.
+    requestAnimationFrame =>
+      @refreshScrollbars() if not styleElement.sheet? or @containsScrollbarSelector(styleElement.sheet)
+      @handleStylingChange()
 
   onAllThemesLoaded: ->
     @refreshScrollbars()