EDIT: Ok, half the time I load the page, the page works and I see the rock, but the other half of the time, the image is shifted down, the top half of the display box is black, and the "rock" is off screen...
EDIT: Ok, half the time I load the page, the page works and I see the rock, but the other half of the time, the image is shifted down, the top half of the display box is black, and the "rock" is off screen...
Psst. Discovery folks. You've got yourself a race condition. You're calculating a `margin-top` to center an image vertically irrespective of whether that image has loaded. You either need to explicitly set the width and height as attributes on the image (good for preventing reflow anyway) or hold off on calculating your dimensions until after the image has loaded. You could even just wait for window load (instead of DOMContentLoaded).
EDIT: Here's an untested, hacky fix. Not an ideal solution but concise and without having to change anything. https://gist.github.com/anonymous/c40e8baf679aad65cb2c
[Edited to add umlaut.]
http://static.ddmcdn.com/gif/blogs/dnews-files-2014-01-myste...