Height calculation problem on 4K display

I am using an embedding a timeline into my own html wrapper page. The timeline.js code miscalculates the height of the timeline at the bottom of the screen; it is too tall. A resize event causes the correct height to be calculated. If the browser window is not full screen then this seems to only happen once it is at or above a certain height. The symptom is that the once-every-ten-year year values are cut off - their bottoms are beyond the bottom edge of the div.

Attached is screen shot showing the problem. I added padding to the body element so this is easier to see and to make it clear that the body element is not taller than the window size. I have also attached my html file (as a txt file) in case it helps. Note that I trigger a resize event after 1.5 seconds and this causes a recalculation that seems to work correctly.

embeddingtimeline.txt

Now that I've tested this a little more, it appears to be the top portion and not the timeline whose height is calculated wrong. That means I can't just force the timeline to be a specific height to fix this; I'll need to do something else, if anything can be done to fix it.

Start with the attached embeddingtimeline.txt and reproduce the issue in the embedded timeline.js example on a 4K display or tall browser window. Compare the initial height calculation with the result after the reported delayed resize event, focusing on the top portion and clipped decade labels. Done means the timeline renders at the correct height on initial load without requiring a resize.