Lee Martin had a good suggestion right here. On CodePen’s Are living View, we use a guardian<iframe> to concentrate for updates to the Pen after which inject them or refresh the preview robotically. However that guardian <iframe> will also be difficult to measurement.

For instance, on iOS, the peak of the iframe used to be as tall because the content material inside of it and you’ll no keep an eye on at all over the place that. In fresh variations of iOS, that turns out mounted. However we bumped into a brand new downside. We sized the iframe to be as tall because the browser window by means of atmosphere top: 100vh. That most commonly works, however sadly, browser UI may from time to time overlap the ground. That turns out extremely foolish, however that’s the best way it’s. Thankfully, there may be a brand spanking new CSS issues known as dynamic viewport gadgets, and Bramus has a just right rundown. Now we’re (regularly) atmosphere top: 100svh or the “Small Viewport”:

The Small Viewport is the viewport sized assuming any UA interfaces which can be dynamically expanded and retracted to be *expanded*.

It looks as if “dynamic” viewport gadgets can have labored as smartly, however “small” perceived to paintings the similar right here and by some means feels more secure. That is on manufacturing now, however see this video as I used to be kinda sorting this out:

Felt like an acceptable factor to paintings on for World Accessibility Consciousness Day (GAAD).