HTML attributes (width, height) of canvas change independently

canvas, css, firefox, html, javascript

Solution

some code on one browser isn't the same on another browser, so in this case, what I would do:

function RefreshSizes (canv) {
    var temp_width = 320;
    var temp_height = 240;

    var canvas = canv;
    canvas.width = temp_width;
    canvas.height = temp_height;
}

I'm sure this will work

Problem

I have some script on JS, it change width and height of canvas element: ``` function RefreshSizes (canvas) { var temp_width = 320; var temp_height = 240; document.getElementById(canvas).setAttribute('width', temp_width); document.getElementById(canvas).setAttribute('height', temp_height); } ``` this functions calling right after canvas initializing. It works fine on Chrome. But in FireFox 49 I see that: What could it be? UPD#1 Tested code of BukkitmanPlays MCPE UPD#2 Full CSS for canvas: ``` element { width: 320px; height: 240px; } .canvas { border: 3px solid #E0E0E0; z-index: 0; position: relative; } html { font: 10px/10px arial; } ```

Original source