JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://dl.dropbox.com/u/10540192/sproutcore-2.0.beta.3.min.js"></script>
<script src="http://dl.dropbox.com/u/10540192/sproutcore-touch-2.0.beta.min.js"></script>
<script type="text/html">  
    {{#view App.OuterView class="outer"}}
    {{#view App.InnerView class="inner"}}
    pinching only over grey area does not work
    {{/view}}
    {{/view}}
</script>

CSS

.outer {
    background-color:yellow;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 1px solid grey;
}

.inner {
    position: absolute;
    top: 100px;
    bottom: 100px;
    left: 100px;
    right: 100px;
    border: 1px solid red;
    background-color:grey;
}

JavaScript

var App = SC.Application.create({
    scale: 1
});

App.OuterView = SC.View.extend({
    
    scaleBinding: "App.scale",
    
    pinchStart: function(recognizer) {
        this._scale = recognizer.get('scale');
    },

    pinchChange: function(recognizer) {
        this._scale *= recognizer.get('scale');
        App.scale.set(this._scale);
    },

    pinchEnd: function(recognizer) {
        this._scale *= recognizer.get('scale');
        alert("done: "+this._scale);
    }
});

App.InnerView = SC.View.extend({
    scaleBinding: "App.scale"
});