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