Famous Blurry Text in Scrollview

main.js

/*globals define*/
define(function(require, exports, module) {
  'use strict';
  // import dependencies
  var Engine = require('famous/core/Engine');
  var Surface = require('famous/core/Surface');
  var Scrollview = require('famous/views/Scrollview');
  var StateModifier = require('famous/modifiers/StateModifier');
  var ViewSequence = require('famous/core/ViewSequence');

  var pack = function (length, fill) {
    var res = [];
    for (var i = 0; i < length; i++) {
      res.push(fill);
    }
    return res;
  }; 

  var mainContext = Engine.createContext();
  var scrollView = new Scrollview();
  var packed = pack(100);

  var surfaces = packed.map(function () {
    var surface = new Surface({
      size: [300, 50],
      content: "This is some sample text.", 
      properties: {
        color: "black",
        textAlign: "center",
        backgroundColor: "#FFA"
      }
    });
    surface.pipe(scrollView);
    return surface;
  });
    
  scrollView.sequenceFrom(surfaces);
  mainContext.add(scrollView);
});