Question

When something has a tabindex in Google Chrome, it puts a box around it to show it is selected. However with KineticJS, in Chrome the border box appears to be 3px too long and looks ugly.

If the Kinetic Stage is given a height of 100px and the containing div of 100px, Chrome thinks the containing div is 103px’s high.

This can be seen here: http://jsfiddle.net/UbxjT/

HTML:

<div id='project1' tabindex=1></div>

CSS:

#project1 {
    width: 500px;
    height: 100px;
    border: 1px solid black;
}

JavaScript:

var stage1 = new Kinetic.Stage({
    container: 'project1',
    width: '500',
    height: '100'
});

Answer 1

Appears to be caused the the Kinetic stage element being the same height as its container and also being display: inline-block

Having the css:

.kineticjs-content {
  display: block !important;
}

will fix this but I have no idea if this will cause you any issues with the Kinetic library having never used it.

http://jsfiddle.net/TmfpG/