Chrome Beta v40 Has New Zoom Behavior That Makes Fixed Headers Scrollable, Less Aggravating

While it might be hard to understand this latest change to Google Chrome at first, you will be very happy once you grasp it. On mobile, websites that have fixed elements – that is, headers or other content that stays in the same place on your screen regardless of which part of the page you are on – can be very annoying. This is especially true when you zoom in, because you often can no longer see the entire element. The update changes the way they are handled to make seeing both the fixed content and the webpage beneath it easier.

How it works in practice

Above is videojs.com, a website that uses a fixed header. You can tell that it is fixed because I have scrolled down the page, but the header is still visible. In this case, while at 100% zoom, there are no problems. Both Chrome stable v39 and Chrome Beta v40 render this page the same way.

Things begin to differ when I pinch to zoom. When viewing the left-most part of the page, both versions will still look the same.

In Chrome v39, I am now in trouble if I want to see any other part of that header. Scrolling to the right will not change the way the header looks. Many will relate to facing this issue, especially when there is no zoom level that shows the entire fixed element due to the website layout or device size/resolution.

Here is how things look when I scroll to the right. On the left side is v39, on the right is v40.

This is so much better. A Chrome developer explains that they wanted zooming to be more like holding up a magnifying glass to the zoomed-out page than like a half-assed scaling up and down of all non-fixed content.

The more technical side

A more precise explanation of the change is that the viewport, which is a fancy way of saying the part of the web page you see at any given time, is now split into two parts. Bear in mind that this isn’t necessarily a new idea, just new to Chrome and newly implemented into the browser design.

Fixed content is designed to stick to a certain portion of the viewport (e.g., a header taking up 600×100 pixels centered at the top). Before this change, headers and the like often took up the same position in the viewport regardless of zoom level because that’s how they are supposed to work. When we could not see the entire header of a page, for instance, it was because that element was larger than the viewport. Let’s say the header was 600 pixels wide, but the zoom was to 300. Half would be unviewable since it overflows off of the screen and cannot be scrolled because it is fixed. These elements did not scale along with the content.

Splitting the viewport in two is basically a trick to make zooming and scrolling on this type of web page function like a magnifying glass without violating the logic of their design. First, we have the “layout viewport,” which is the rectangular region where fixed elements like headers exist. In terms of those sticky top bars and the like, the layout portion is the one they treat as the viewport. Then, there is the “visual viewport,” the part of the page you actually see. Where the conventional viewport scrolls through the webpage, this one scrolls around the layout viewport.

Another way to think about it is that Chrome tells fixed content a false viewport (the layout one), while the visual viewport understands the web page as the page plus the layout. It is an elaborate way of un-fixing the fixed elements. In the pictures below (thanks to David Bokan’s Google Slides presentation), the one on the left is a visualization when zoomed out; nothing changes. The second shows how the viewports differ when you pinch to get a closer look.

For comparison, here is how this representation would look with Chrome v39’s single viewport. The blue box represents what you see while viewing the web page, scrolled and zoomed to that position.

This is obviously a change that was not taken lightly (it has been in development since 2012) and is a good step in making websites work on both desktop and mobile. It could very well become the mobile standard, especially considering that Chrome developer Rick Byers says that Microsoft’s Internet Explorer team has decided to do the same thing, despite the groups having not planned together. It is just the best way to handle the unique case of mobile browsing.

Sources: Rick Byers on Google+

QuirksMode

Source : Android Police – Android News, Apps, Games, Phones, Tablets Â» Apps/Games