Wait for next animation frame before measuring when stylesheets change

Fixes #4479

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

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()