Safari 15 has ResizeObserver API but it still does not work
205g0 opened this issue · comments
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.
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.
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)
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'
Ok, thanks for letting me know and no worries! 🙂
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'
});I could probably highlight this in the readme, although I'm already linking to the same support tables.
Hey thanks for looking into it! Meanwhile I migrated to Svelte, so I don't need this anymore but still thanks for helping out!
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"))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.
As of Safari 17.2.1 it seems like ResizeObserver is working on SVGs.