Use ResizeObserver instead of iframes if available

[pushkine]

https://caniuse.com/resizeobserver 87%
note that typescript dom libs do not include types for ResizeObserver
untested

[Rich-Harris]

This is very cool, but I don't think we can switch between ResizeObserver and iframes for the same binding — you could much too easily fall into a situation where something works when you test it locally in Chrome, but doesn't work for all of your users (because you've used it on an element that can't contain an iframe, like an inline-level element or an SVG element).

Instead, perhaps we should add a new set of bindings...

<div bind:contentRect bind:contentBoxSize bind:borderBoxSize>...</div>

...which are documented with the caveat that they don't work in IE11 etc.

[swyxio]

has anyone suggested adding an ie11 compat toggle to svelte:options yet?

[j3rem1e]

why is this PR closed ?

[pushkine]

why is this PR closed ?

I'm sorry I was deleting some of my svelte branches, I assumed those linked to an open PR would prompt a confirm dialog

[jacwright]

@pushkine are you interested in updating this PR for the contentRect etc. bindings as suggested by Rich?

[bluwy]

Would love to has this merge too. I've recently encountered a performance issue when rendering large arrays of elements that uses bind:clientWidth (and friends). The iframes mounting and unmounting heavily lags the page.

Re: ResizeObserver types
The latest TypeScript dom lib should have the types now.

Re: Can't use iframes in some elements and bind:contentRect
I'd prefer keeping the bind:clientWidth and bind:clientHeight names, and instead check during runtime for these edge cases to warn users beforehand (dev: true only). Or we could point to using a polyfill instead (we're technically polyfilling it anyways)

FWIW ResizeObserver now has 92% global usage

[tanhauhau]

See #5524 (comment)

Closed in favour of #5963