Lee Martin had a good idea here. On CodePen’s Live View, we use a parent<iframe> to listen for updates to the Pen and then inject them or refresh the preview automatically. But that parent <iframe> can be tricky to size.
For example, on iOS, the height of the iframe was as tall as the content inside it and you can no control at all over that. In recent versions of iOS, that seems fixed. But we ran into a new problem. We sized the iframe to be as tall as the browser window by setting height: 100vh. That mostly works, but unfortunately, browser UI could sometimes overlap the bottom. That seems incredibly silly, but that’s the way it is. Fortunately, there is a brand new CSS things called dynamic viewport units, and Bramus has a good rundown. Now we’re (progressively) setting height: 100svh or the “Small Viewport”:
The Small Viewport is the viewport sized assuming any UA interfaces that are dynamically expanded and retracted to be *expanded*.
It looks like “dynamic” viewport units could have worked as well, but “small” seemed to work the same here and somehow feels safer. This is on production now, but see this video as I was kinda sorting this out:
Felt like an appropriate thing to work on for Global Accessibility Awareness Day (GAAD).
The post Live View Iframe Sizing appeared first on CodePen Blog.