Sizing the live view iframe

Posted on

Lee Martin got a good idea here. On CodePen’s live view, we use a parent<iframe> to listen for Pen updates and then inject them or refresh the preview automatically. But this relative <iframe> can be difficult to size.

For example, on iOS the height of the iframe was as tall as the content inside and you can’t control that. In recent versions of iOS, this seems fixed. But we ran into a new problem. We sized the iframe to be as big as the browser window by setting height: 100vh. This usually works, but unfortunately the browser UI can sometimes overlap the bottom. It sounds incredibly stupid, but that’s how it is. Luckily, there’s a whole new CSS thing called dynamic window units, and Bramus has a good overview. Now we are (gradually) putting in place height: 100svh or the “Small window”:

The small window is the window sized assuming that all UA interfaces that are dynamically expanded and retracted must be *expanded*.

Seems ‘dynamic’ window units could have worked as well, but ‘small’ seemed to work the same here and somehow felt more secure. It’s in production now, but check out this video while I was sorting this out:

test pen

Felt like an appropriate thing to work on Global Accessibility Awareness Day (GAAD).

The post Live View Iframe Sizing appeared first on CodePen Blog.

Leave a Reply

Your email address will not be published.