New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
bind:offsetHeight doesn't update in certain cases #4233
Comments
When this was first implemented in #1386, ResizeObserver had just come out from behind a flag in Chrome and wasn't available anywhere else yet. It'd probably make sense to use that now though when possible. |
@Conduitry would you be worried about the lack of Safari support here: https://caniuse.com/#search=ResizeObserver (esp. iOS) |
I wasn't suggesting that we drop the existing resizing mechanism, just that ResizeObserver is widespread enough that it'd be worth it to use that when possible. |
When
This would allow predictable results for people that need them. For example in an Electron application we know that |
Probably still want to keep the fallback for older browsers, but it would be worth adding it now as most browsers support it. This would be an easy ticket for anyone interested in contributing to core. Just one runtime method to update, https://github.com/sveltejs/svelte/blob/master/src/runtime/internal/dom.ts#L262 |
I'd like to take this, if nobody's working on it! |
As discussed in sveltejs#4233, ResizeObserver is now widely available (>90% as of 15/01/2021) so we can use it instead of a custom-built solution to listen to resizes. I also needed to add @types/resize-observer-browser because the type definition for `ResizeObserver` hasn't landed in TS yet (see microsoft/TypeScript#28502). Closes sveltejs#4233.
As discussed in sveltejs#4233, ResizeObserver is now widely available (~90% as of 15/01/2021, [source](http://caniuse.com/?search=ResizeObserver)) so we can use it instead of a custom-built solution to listen to resizes. I also needed to add @types/resize-observer-browser because the type definition for `ResizeObserver` hasn't landed in TS yet (see microsoft/TypeScript#28502). Closes sveltejs#4233.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. |
Describe the bug
In Chrome, using
bind:offsetHeight
on a component that immediately changes size does not trigger a change in theoffsetHeight
variable:https://codesandbox.io/s/upbeat-hill-ilkqt?fontsize=14&hidenavigation=1&module=%2FApp.svelte&theme=dark
This does not seem to happen in Firefox or Safari, but it does happen in Chrome.
To Reproduce
https://codesandbox.io/s/upbeat-hill-ilkqt?fontsize=14&hidenavigation=1&module=%2FApp.svelte&theme=dark
Expected behavior
offsetHeight
should be something close to800
(in the example above)Notes
Is there a reason Svelte doesn't attempt to use a ResizeObserver for resize detection?
The text was updated successfully, but these errors were encountered: