Height being calculated different between Chrome and Firefox?

Question

So take a look at www.qualificationcheck.com under both Chrome and Firefox. Alt-tab rapidly back and forth between them focusing on that little green 'help & feedback' side tab.

It appears to move position! Whys this?

Its included by a 3rd party Javascript file. I've looked into it to figure out how it calculates its position.

First it sets top: 50% to get it roughly 50% of the way down the viewport.

Then it sets

margin-top: [ "-",Math.round(tab.dimensions.height / 2), "px" ].join("")

ie minus half the height of the tab so it shifts back upwards slightly so the 'middle' of it is actually 50% of the way down the viewport (rather than the 'top').

Using Chrome dev tools and then firebug in Firefox I can see that in Chrome margin-top ends up being -33px while in Firefox it ends up being -87px.

Why the difference?

Its annoying because I want to add my own tab above or below it but I can't determine where to put my own tab if I can't rely on the 3rd-party one to be in the same position all the time!

Answer 1

Sorry guys, neither of the other answers helped.

I resolved this by basically copying the 3rd party js and then tweaking it so I could position it and my new tab together as one.

So basically just a work around rather than an answer to the issue.

Answer 2

Try adding padding-top: ?px and it should be the same for both Firefox and Chrome. Some people on the net are reporting a similar issue with margin-collapse (not a bug, apparently):

http://www.sitepoint.com/forums/showthread.php?829681-CSS-margins-displaying-differently-on-Firefox-Ie-Chrome

Margin Discrepancies between Firefox and Chrome/Safari

Answer 3

Firefox (and Chrome since recently) interpret margin and padding differently. Margin and padding values are added to the div height/width. You can fix this (at least for FF) by adding this to your css (put it at the top):

DIV {
   -moz-box-sizing:border-box;
   box-sizing:border-box;
}