<html>
<head>
<style>
    #test { 
        margin: 5px;
    }
    #test.composite > .container {
        -webkit-transform: translateZ(0);
        opacity: 0.95;
    }
    .container {
        position: absolute;
    }
    .shifter {
        position: absolute;
        background-color: black;
        width: 12.5px;
        height: 12.5px;
    }
    .shifter8x8 {
        position: absolute;
        background-color: black;
        width: 16.5px;
        height: 16.5px;
    }
</style>
</head>
<body>
<div id=test class=composite>
</div>
<script>
    function setupGrid10x10(leftOffset, topOffset, leftFraction, topFraction)
    {
        var test = document.getElementById('test');
        for (var i = 0; i < 10; i++) {
            if (i == 5)
                topOffset += 5;
            var leftOffsetj = leftOffset;
            for (var j = 0; j < 10; j++) {
                if (j == 5)
                    leftOffsetj += 5;
                var container = document.createElement("div");
                var shifter = document.createElement("div");
                container.setAttribute('class', 'container');
                shifter.setAttribute('class', 'shifter');
                container.style.left = (leftOffsetj + j * 16 + i * leftFraction) + "px"
                container.style.top = (topOffset + i * 16 + i * topFraction) + "px"
                shifter.style.left = (5 + j * leftFraction) + "px"
                shifter.style.top = (5 + j * topFraction) + "px"
                container.appendChild(shifter);
                test.appendChild(container);
            }
        }
    }

    function setupGrid8x8(leftOffset, topOffset, leftFraction, topFraction)
    {
        var test = document.getElementById('test');
        for (var i = 0; i < 8; i++) {
            if (i == 4)
                topOffset += 5;
            var leftOffsetj = leftOffset;
            for (var j = 0; j < 8; j++) {
                if (j == 4)
                    leftOffsetj += 5;
                var container = document.createElement("div");
                var shifter = document.createElement("div");
                container.setAttribute('class', 'container');
                shifter.setAttribute('class', 'shifter8x8');
                container.style.left = (leftOffsetj + j * 20 + i * leftFraction) + "px"
                container.style.top = (topOffset + i * 20 + i * topFraction) + "px"
                shifter.style.left = (5 + j * leftFraction) + "px"
                shifter.style.top = (5 + j * topFraction) + "px"
                container.appendChild(shifter);
                test.appendChild(container);
            }
        }
    }

    function setupTest()
    {
        // Vertical shifts:
        setupGrid10x10(10, 10, 0, 0.1)
        // Horizontal shifts:
        setupGrid10x10(200, 10, 0.1, 0);

        // And in 8x8 (where exactly 0.5 is more common)
        setupGrid8x8(10, 200, 0, 0.125);
        setupGrid8x8(200, 200, 0.125, 0);
    }

    setupTest();
</script>
</body>
</html>