requestAnimationFrame shim

app/assets/javascripts/player.js

@@ -1,3 +1,4 @@
+//= require vendor/raf-shim
 //= require extensions
 //= require namespace
 //= require player/views/renderers/base

app/assets/javascripts/player/views/renderers/base.js.coffee

@@ -8,7 +8,7 @@ class AsciiIo.Renderer.Base extends Backbone.View
     @showCursor true
     @startCursorBlink()
     @clearState()
-    webkitRequestAnimationFrame @render
+    requestAnimFrame @render
 
   clearState: ->
     @state =
@@ -27,13 +27,14 @@ class AsciiIo.Renderer.Base extends Backbone.View
     @state.dirty = true
 
   render: =>
-    webkitRequestAnimationFrame @render
+    requestAnimFrame @render
 
-    for n, fragments of @state.changes
-      c = if parseInt(n) is @state.cursorY then @state.cursorX else undefined
-      @renderLine n, fragments || [], c
+    if @state.dirty
+      for n, fragments of @state.changes
+        c = if parseInt(n) is @state.cursorY then @state.cursorX else undefined
+        @renderLine n, fragments || [], c
 
-    @clearState()
+      @clearState()
 
   renderLine: (n, data, cursorX) ->
     throw '#renderLine not implemented'

app/assets/javascripts/vendor/raf-shim.js

@@ -0,0 +1,11 @@
+// shim layer with setTimeout fallback
+window.requestAnimFrame = (function(){
+  return  window.requestAnimationFrame       ||
+          window.webkitRequestAnimationFrame ||
+          window.mozRequestAnimationFrame    ||
+          window.oRequestAnimationFrame      ||
+          window.msRequestAnimationFrame     ||
+          function( callback ){
+            window.setTimeout(callback, 1000 / 60);
+          };
+})();