It's viewports all the way down

Bramus schools Jake about all the viewports that exist in the browser. If you've had layout issues with position fixed, vw units, or height:100%, this episode will probably explain why.

Chapters:
00:00 - Prologue
00:17 - Intro
01:03 - Desktop Browsers / The Layout Viewport
05:33 - The ICB
12:51 - Viewport Units
16:07 - Pinch Zoom / The Visual Viewport
19:29 - The Layout Viewport, ICB, and Visual Viewport on Mobile Browsers
23:30 - The Large, Small, and Dynamic Viewport
28:35 - Viewports Units and their relation to the ICB
30:25 - Resize Behavior (on mobile) when editable areas gain focus
36:01 - The Virtual Keyboard API
38:44 - A look into my Crystal Ball
42:04 - Interop 2022 Viewport Investigation Effort
43:20 - Epilogue

Resources:
The Large, Small, and Dynamic Viewports → https://goo.gle/3qxhne7
Prevent content from being hidden underneath the Virtual Keyboard by means of the VirtualKeyboard API → https://goo.gle/3U9rl2X
Interop 2022 Viewport Investigation Effort Discussion → https://goo.gle/3DhBHYN
Interop 2022 Viewport Investigation Effort Test Pages → https://goo.gle/3BDcuqy
CSSWG Issue on Viewport Resize Behavior and Positioning → https://goo.gle/3QJe12q

Specifications:
(Layout) Viewport Definition (CSS2 Specification) → https://goo.gle/3DlfjxG
Containing Block Definition (CSS2 Specification) → https://goo.gle/3Dl9hwN
Viewport Relative Lengths (CSS Values 4 Specification) → https://goo.gle/3ddLwvZ
The Visual Viewport (MDN) → https://goo.gle/3L9PsKU
The Visual Viewport API (CSSOM Specification) → https://goo.gle/3qvAJk2
Viewport Variants (CSS Values 4 Specification) → https://goo.gle/3U7Wd3M
Virtual Keyboard Specification → https://goo.gle/3qzq7R2

More videos in the HTTP 203 series → http://goo.gle/HTTP203
Subscribe to Google Chrome Developers here → https://goo.gle/ChromeDevs

Also, if you enjoyed this, you might like the HTTP203 podcast → https://goo.gle/HTTP203Podcast

#HTTP203 #ChromeDeveloper #WebDev