New in @ChromeDevTools (in Chrome Canary): You can now force more states – such as :active, :focus, … – onto elements.
For example, when inspecting an <input> element you can now also force states such as :enabled, :valid, etc.
Today I saw this React hook (see photo) get shared on birdsite. It enables one to “automatically scroll down when new messages arrive in a chat”.
While it might work, you could — and should — use this little bit of CSS instead:
```
.log {
scroll-snap-type: y proximity;
align-content: end;
}
.log::after {
display: block;
content: "";
scroll-snap-align: end;
}
```
“… remains snapped to the bottom …unless the user has scrolled away from that edge” —
👀 Apple/WebKit about to express support for cross-document View Transitions (and related features such pageswap, pagereveal, render blocking) + also View Transition Types.
Oh nice, @npub1j49x...m4j6 now has support for the 'interactive-widget' meta viewport key, to control the viewport resize behaviour when showing a virtual keyboard.
There are 3 values to choose from: resizes-visual, resizes-content, and overlays-content.
You can use one of these values to prevent a `position: fixed` element from getting placed underneath the virtual keyboard.
See
