Canvas putImageData rendering inconsistent

I'm looking into a very weird bug working with canvas putImageData. Here is the code snippet:

// Results contains an indexMap of size 90000 and rgbdata of size 360000, data from a 300*300px source canvas
var results = state.results;

// output_canvas is the target canvas element of 300*300px
var output_canvas = document.getElementById('output_canvas');
var context = output_canvas.getContext('2d');
var imageData = context.createImageData(300, 300);
var data = imageData.data;
for (var i = 0; i < results.indexMap.length; ++i) {
    if (results.segments[results.indexMap[i]].foreground) {
        data[4 * i + 0] = results.rgbData[4 * i + 0];
        data[4 * i + 1] = results.rgbData[4 * i + 1];
        data[4 * i + 2] = results.rgbData[4 * i + 2];
        data[4 * i + 3] = 255;
    } else {
        data[4 * i + 3] = 0;
    }
}
context.putImageData(imageData, 0, 0);

I can get the correct image rendered on "output_canvas" on Mac chrome. But it failed to render on Safari and Firefox. The final image is cut off and looks twice as big in both dimensions. I suspect this being a browser issue for putImageData implementation but I couldn't find a confirmation from any official source. Does anyone has similar problem? Any help is appreciated.