How to get real block size on screen for WebKit?

Question

JavaScript

There are two blocks that occupy 50% of the screen width. Each of the blocks has two blocks with 100% width, arranged vertically. Example: jsfiddle.net/Xr73W/5 . If you change the width of the viewport, you will notice that the title frames are sometimes drawn smaller in width than the content. Below the blocks are various block widths.
How to get the actual width of the top and bottom boxes on the screen using JS for WebKit? Perhaps there is some recipe to bypass this artifact?
Chrome dev tools show wrong width (407px, even though the whole picture is 406px):

PS In Firefox, everything is displayed correctly

Answer 1

if I understand correctly use this
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}