1 of 11

Chrome Viewports

bokan@google.com

2 of 11

Current Implementation

  • Just one viewport
  • Container for position: fixed elements
  • Does not scale with content

3 of 11

The problem

4 of 11

5 of 11

(Near-)Future Implementation

  • Introduce a new viewport
    • Split layout and visibility
  • “Layout Viewport”
    • Container for fixed-position elements
    • Scales with content
    • Is the layout dimensions of the page
      • Size of the Initial Containing Block
  • “Visual Viewport”
    • What the user sees
    • Does not scale with the page
    • Always contained inside the layout viewport
  • Similar to IE model

Red box is visual viewport

Blue box is layout viewport

6 of 11

  • Pinch-zoom doesn’t cause full page layout
  • Position-fixed elements don’t obscure the viewport
  • Position-fixed elements can be scrolled

Nice properties

Red box is visual viewport

Blue box is layout viewport

7 of 11

Philosophy

  • Pinch shouldn’t be exposed to the platform in any way
    • Browser feature - mobile sites shouldn’t need zoom
  • User’s mental model: magnifying glass
    • Elements shouldn’t stick to the inner viewport
  • If you want a more featureful pinch experience build it yourself (e.g. Maps)

​

8 of 11

Related Note: On screen keyboard

  • Current behavior causes resize + layout
  • Janky on pages with heavy resize handlers (play.google.com/store)
  • Position: fixed elements can obscure input field

bottom position: fixed

Oops!

9 of 11

Goals - Legacy

  • Legacy cases should “just work” by default
  • No window resize
  • No layout
  • Adjust page scroll insets so content at the bottom of the document can be scrolled into view

​

position: fixed element stays below the keyboard

10 of 11

Chrome adjusts insets by resizing the visual viewport

Fixed Position Element

Fixed Position Element

Red box is visual viewport

Blue box is layout viewport

11 of 11

Goals - Mobile

  • Give app full control
  • Allow it to disable scroll inset adjustment
    • Allow fixing elements to the top of the keyboard
  • Notify app of the keyboard’s dimensions
    • Allow animation if the underlying platform supports it
  • Enable Key Scenarios:
    • Make editing UI elements stay fixed above the keyboard
    • Rearrange UI in response to keyboard/smaller viewport