Safari 15 has ResizeObserver API but it still does not work

[205g0]

Pretty much the title and according to https://caniuse.com/resizeobserver and other sources the ResizeObserver API landed in Safari on iOS 2020, so no poyfill is needed. My code works on Chrome on Firefox flawlessly.

[ZeeCoder]

Hi, can you provide a minimal reproduction of the issue, ideally on codesandbox?

I'm testing the library in Safari 13 via Browserstack, so it should work.

[205g0]

I tested on a real iPhone and with latest Safari (15). Maybe you get somehow an iPhone first (e.g., from a friend) or at least the simulator within XCode on a Mac? Once you have one of either and running latest Safari , I'm happy to provide a min repo. Providing anything before while having different testing envs doesn't make too much sense...

{btw, I am not an Apple guy either, I just have years old Apple hardware lying around for testing purposes, e.g., the first iPhone SE is avail for less than 100 bucks refurbed and runs latest iOS and Safari)

[205g0]

Hi again, I quickly made a min repo, here you go, https://codesandbox.io/s/ancient-river-zb0z5?file=/src/App.tsx

The direct link just to the view on an iPhone is avail under https://zb0z5.csb.app/ but pls check first the first link to understand the source.

The view should show 'Hello Code Sandbox [this div's width size]' but shows on Safari 15 'Hello Code Sandbox 1'

[205g0]

@ZeeCoder could you reproduce the error?

[205g0]

@ZeeCoder are you okay? Do you need anything more I can provide?

[ZeeCoder]

Hey, sorry I can't look at it yet. Earliest would be the weekend but we'll see.

…

On Wed, 6 Oct 2021, 06:52 205g0, ***@***.***> wrote: @ZeeCoder <https://github.com/ZeeCoder> are you okay? Do you need anything more I can provide? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#85 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA4CKEWN57HTNTQ7WWT65S3UFPIXTANCNFSM5FF7NYRA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[205g0]

Ok, thanks for letting me know and no worries! 🙂

[ZeeCoder]

I'll keep you posted 👍

…

On Wed, 6 Oct 2021, 17:53 205g0, ***@***.***> wrote: Ok, thanks for letting me know and no worries! 🙂 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#85 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA4CKEQHCNHJ7KNED7FBE23UFRWIVANCNFSM5FF7NYRA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[ZeeCoder]

Seems like Safari does not support the box property as advertised here.
The properties are not actually available, which is why you're not getting a size report when you ask for border-box.
(content-box should work fine.)

This really highlights how experimental all this is, and support is weird too.

For example, in Chrome / FF, RO will actually respond with all box sizes, regardless of what you're actually asking for. 🤷‍♂️

I might be mistaken, but I think this behaviour is actually against the spec.

You can test browser support by running this little code snippet:

new ResizeObserver((entries) => {
	console.log(entries[0])
}).observe(document.body, {
	box: 'border-box'
});

[ZeeCoder]

I could probably highlight this in the readme, although I'm already linking to the same support tables.

[205g0]

Hey thanks for looking into it! Meanwhile I migrated to Svelte, so I don't need this anymore but still thanks for helping out!

[ZeeCoder]

no worries, have fun hacking 👌

…

On Mon, 25 Oct 2021, 18:54 205g0, ***@***.***> wrote: Hey thanks for looking into it! Meanwhile I migrated to Svelte, so I don't need this anymore but still thanks for helping out! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#85 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA4CKETJPYQY2RGB6RFZZFDUIWDVBANCNFSM5FF7NYRA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[vincerubinetti]

Safari is driving me absolutely crazy. Apparently, just to let people know, ResizeObserver doesn't seem to work on <svg> elements, at least of Version 16.4 (18615.1.26.110.1)

On a webpage that has an SVG that scales with the window width, try this in dev tools:

new ResizeObserver(console.log).observe($("svg"))

jsfiddle

This should console log when you resize the window. It works fine in Chrome and Firefox, but not Safari. If you change the element being observed to something else, like a <div>, then it starts to work in Safari.

Yet another example of Safari's horrible implementation of SVG.

Related stackoverflow post
Webkit bug report

[vincerubinetti]

As of Safari 17.2.1 it seems like ResizeObserver is working on SVGs.