Height calculation problem on 4K display

[rectorsquid]

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.

[rectorsquid]

I found a work-around in the CSS:

	#timeline-embed {
		width: 100%; 
		height: 100%;
		overflow: visible;
	}

Allowing overflow makes the overflowing content visible. A browser window resize will cause things to jump a bit as the recalculation comes up with the correct results. But it works. Note that this is not an option for those that don't add a border around the entire timeline!