🧭 Ideas for Safe Area Improvements on the Web

Timothy Horton on the WebKit blog: You might have noticed the outer display of iPhone Duo is wider and shorter than other iPhone displays. To give content more vertical space, iOS moves controls to the side. In Safari 27.1, web content does not currently extend to fill the space behind these controls. Just like on other platforms, Safari looks at the web page and extends its background color to fill the space. We would like to give web designers and developers the ability to design and use that space in more creative ways. Perhaps you want to extend your header background across the full width of the display, for example. It might seem like there’s just one obvious way to make this possible, but really there are many possibilities. We could use the HTML viewport meta tag with viewport-fit="cover" to extend the webpage into that space, hoping developers also use the appropriate environment variables to scoot important content away from system controls. But as we research how today’s…