The following HTML file produces something peculiar in Chrome depending if the line \[code\]$("#canvas").height(100);\[/code\] is commented or not.\[code\]<!DOCTYPE html><html> <body> <div style="margin-right: auto; margin-left: auto; width: 940px;"> <div><h1>Title</h1></div> <div style="height: 50px;"></div> <svg id="canvas" style="width: 100%; position: absolute; left: 0px; z-index: -1;"> <rect id="rect" x="0" y="0" width="100" height="100" fill="none" stroke-width="1" stroke="black"/> </svg> <div id="div1">Hi</div> <div id="div2"></div> </div> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript"> function move() { var left = $("#div1")[0].getBoundingClientRect().left; $("#div2").text('left = ' + (left - 5)); $("#rect").attr("x", left - 5); $("#canvas").height(100); } move(); $(window).resize(function() { move(); }); </script> </body></html>\[/code\]When loading the page in a maximized Chrome window then depending on the resolution, the div's text changes to \[code\]left = N\[/code\]. It turns out this value of \[code\]N\[/code\] is off by 7. This can be seen by resizing the window so it's not maximized and then maximizing it again.This strange behavior doesn't show up when the line \[code\]$("#canvas").height(100);\[/code\] is commented out. You can witness this in this jsfiddle: http://jsfiddle.net/jvPCM/1/. You'd have to widen the Result pane to the left until the rect isn't close to the left edge and then hit refresh to see the incorrect drawing. It will be fixed if you resize the pane again. Here how it looks:Good:
Bad:
What can cause this?FYI: This doesn't show up in Firefox (which ironically required setting the height in the first place).