Fixing overlay wobbling

This appears to actually be a bug with the book error message - if you check top-left in your video you'll see an error message that isn't being rendered properly (it should be one of the popup alert things in the bottom-right).

I knew I should have uploaded the normal popup overlay for showcase, my bad
But actually no, it's the overlay itself, now I haven't read any books yet, check this out:
https://dl.dropboxusercontent.com/s/cknd6da3bel0dqw/vTFmkaaZuE.mp4

Also, the new error message produces the same thing:
https://dl.dropboxusercontent.com/s/qz8t5ze59zvam3q/QbCBEfn5Ef.mp4

I'm not doing anything to hide the scrollbar like that, so I presume that is normal browser behaviour?

It's because there is nothing to scroll down, so the browser removes the vertical scroll bar.
The modal is part of the normal page flow, one trick could be to make the modal as tall as the page below it, but this is messy coz you'd have to create transparent parts if you don't wan't it to cover the whole page.

What I was thinking of is the new html dialog element, what if we tried to use that?
Maybe it would do the same, but maybe  it wouldn't affect the page behind it.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

Hmm, looks like that isn't enabled by default in Firefox, so probably not usable. I'll look into alternatives for the current dialog popups though. There's still IMO too much chaos with all the alerts, popups, notifications etc.

Yeah now that I think about it I think the fullscreen overlay should do the trick.
So basically you create a fullscreen div (same height and width as the underlaying page), make that transparent, then create another div for whatever width and height you need and that would be the content itself.