This is an experiment to see how different browsers scroll widgets into view.
Try the live demo here.
✔️ indicates browser will scroll widget into the view when focus by TAB.
❌ indicates browser will not scroll widget into the view when focus by TAB.
| Widget | Condition | Chrome 103 | Edge 105 | Firefox 103 | Safari 15 (macOS) |
|---|---|---|---|---|---|
<button> |
Partially on-screen | ❌ | ❌ | ❌ | ❌ |
| Completely off-screen | ✔️ | ✔️ | ✔️ | ✔️ | |
<input type="text"> |
Partially on-screen | ✔️ | ✔️ | ❌ | ❌ |
| Completely off-screen | ✔️ | ✔️ | ✔️ | ✔️ |
Note: For Safari, we use OPTION + TAB to focus on
<button>.
All modern browsers will scroll widgets into the view if they are completely off-screen. Partially off-screen widgets are generally not scrolled into the view.
However, if the partially off-screen widgets is a text box, Chrome and Edge will scroll them into the view. And Firefox and Safari will not scroll.
Edge.105.mp4
Firefox.103.mp4
Patterns are from https://heropatterns.com/, under CC BY 4.0.