school Are you a developer in an agency in the UK, Indonesia or India? Find out more about our free 2 day Progressive Web Apps training .

What the Virtual Viewport?

In Chrome M40 there is a change to the viewport that is pretty subtle, but should make a big difference to users.

When mobile browsers started out, the lack of a viewport meta tag meant they would make the web page think it had approximately 980px of screen real estate and render at this size. With a viewport meta tag, developers could define the width, most common of which is "device-width", which sets the screen size to that of the device. You can learn more on Web Fundamentals.

The way Rick Byers describes the virtual viewport is as follows: the idea of the virtual viewport is to split the notion of "the viewport" into two, "the layout viewport" (where fixed position items are attached) and "the visual viewport" (What the users actually see).

Super Simple Example

The website is a good example because it's appbar is fixed to the top and has links on both the left and right side of the appbar.

The image below shows what you would see if you zoomed in on a site and tried panning left and right.

The top devices are Chrome M39, which doesn't have a virtual viewport and the bottom 3 are from Chrome M40, which has a virtual viewport.

pixelated rendering

pixelated rendering

In Chrome M39, you will see the appbar after you zoom in, but scrolling to the right doesn't allow you to view the links on the right side of the bar, you'll only ever see the logo.

Compare this to Chrome M40 (which has a "virtual viewport") and you'll see that the "visual viewport" scrolls everything inside the "layout viewport", allowing you to view the links on the right.

Internet Explorer already has this behaviour and these changes bring us more closely inline with them.

html { overflow: hidden; }

The only major developer facing change that comes with this is that in M39, you could apply overflow: hidden to the html element and your page would still scroll, in M40, this is no longer supported, the page will simply not scroll.

More Solid Info

You want to learn more huh?

Well then, you can view the slide deck below OR check out Rick's Google+ Post, which you really should do since he's much better at this stuff than me ;)