Fix and simplify resize handling using ResizeObserver #3411
Conversation
There was a problem hiding this comment.
Nice simplification! The root cause of the issue is that we're animating the term-group's margin-top but only resizing once (at the beginning, when the div is biggest)
I'd like to include this in the next canary release but we also need to disable said animation. Otherwise many resizes happen in quick succession giving us some nice jank (resize is costly)
Do you mind removing this line in your PR as well?https://github.com/zeit/hyper/blob/canary/lib/components/terms.js#L148
|
Alternatively, we could keep the animation but change it to a |
|
Awesome work @igorsdv ! Thank you for your help 🙏 I've always been frustrated by all these fit resizes. |
|
That's amazing @igorsdv |
|
I have a minor regression. Terms are blinking when resize terms |
|
Hey @igorsdv, fyi I'm pushing the couple of changes directly to this PR, because we're trying to get it merged as soon as possible (It helps a lot :) |
| } | ||
|
|
||
| .terms_termsShifted { | ||
| margin-top: 68px; | ||
| animation: shift-down 0.2s ease-out; |
There was a problem hiding this comment.
I made the shift-down a little faster (and eased out) because it overlaps a bit with the tabs
|
Thank you @onecamp! Sorry I didn't get around to making the changes over the weekend! |
No worries, this was super helpful! |
Fixes #3227.
Terminals do not get properly resized when switching between single-tab and multiple-tab layout, causing a rendering issue at the bottom of the viewport. This can also be triggered when splitting panes vertically in a small window.
This is fixed by using a ResizeObserver on the wrapper element to trigger the resize, which incidentally simplifies a lot of the resizing code. In particular,
onOpenis no longer needed as the observer fires immediately when registered.Note that ResizeObserver is an experimental API, but has been available on Chrome stable since Chrome 64.