Cache odd behavior

HTML

<script type="text/javascript" src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.0.js""></script>
<div id="canvasDiv"></div>
<img id="hit" src=""/>
<button id='cache'>Cache</button>
<button id='cacheDisplay'>CacheDisplay</button>
<button id='cacheInner'>CacheInner</button>
<button id='cacheRect'>CacheRect</button>
<button id='fix'>Fix</button>

JavaScript

var stage = new Kinetic.Stage({
    container: 'canvasDiv',
    width: 300,
    height: 100,
    draggable: false,
    pixelRatio: 2
});

var layer = new Kinetic.Layer();    

var groupOuter = new Kinetic.Group({
    x: 50,
    y: 20,
    width: 100,
    height: 100
});

var groupInner = new Kinetic.Group({
    x: 10,
    y: 10,
    width: 70,
    height: 70,
});
var rect = new Kinetic.Rect({
    width: 50,
    height: 50,
    stroke: 'grey',
    strokeWidth: 3,
    fill: 'yellow',
});

var text = new Kinetic.Text({
    x: 18,
    y: 15,
    text: 'A',
    fill: 'black',
    fontSize: 24
});

groupInner.add(rect);
groupInner.add(text);

var display = new Kinetic.Text({
    x: 10,
    y: 75,
    text: 'Display',
    fill: 'black',
    fontSize: 14
});

groupOuter.add(groupInner);
groupOuter.add(display);

layer.add(groupOuter);
stage.add(layer);

document.getElementById("hit").src = layer.getHitCanvas().toDataURL();

document.getElementById('cache').addEventListener('click', function() {
    groupInner.clearCache();
    groupOuter.cache();
    layer.draw();
});

document.getElementById('cacheInner').addEventListener('click', function() {
    groupOuter.clearCache();
    groupInner.cache();
    layer.draw();
});

document.getElementById('cacheDisplay').addEventListener('click', function() {
    groupOuter.clearCache();
    groupInner.clearCache();
    //display.cache()
    rect.cache();
    layer.draw();
});

document.getElementById('cacheRect').addEventListener('click', function() {
    groupOuter.clearCache();
    groupInner.clearCache();
    display.clearCache();
    rect.cache();
    layer.draw();
});

document.getElementById('fix').addEventListener('click', function() {
    var absPosOuter = groupOuter.getAbsolutePosition(),
        posInner = groupInner.getPosition();
    groupOuter.clearCache();
    display.clearCache();
    rect.clearCache();
    groupInner.cache({
        x: absPosOuter.x,
        y: absPosOuter.y,
        width: posInner.x +...