This works great in Firefox (and presumably Chrome), but it doesn't work as expected on Safari due to some limitations in Safari's implementation of custom HTML elements (such as turbo-frame). Specifically, it looks like IntersectionObserver callbacks fire on custom elements regardless of whether they're in the viewport, so this implementation loads all pages eagerly.
For things that have a known finite number of pages, this is probably still usable, but if someone's loading a virtually infinite social feed it'll probably crash their browser.
I've noticed a few other minor issues with Turbo and Safari. Nothing that doesn't work at all, but definitely some things that will require some workarounds to work as expected. For example, you can't style a turbo-frame in Safari — you can use it as an ancestor element in a selector but you can't apply styles to it directly.
This works great in Firefox (and presumably Chrome), but it doesn't work as expected on Safari due to some limitations in Safari's implementation of custom HTML elements (such as
turbo-frame
). Specifically, it looks likeIntersectionObserver
callbacks fire on custom elements regardless of whether they're in the viewport, so this implementation loads all pages eagerly.For things that have a known finite number of pages, this is probably still usable, but if someone's loading a virtually infinite social feed it'll probably crash their browser.
I've noticed a few other minor issues with Turbo and Safari. Nothing that doesn't work at all, but definitely some things that will require some workarounds to work as expected. For example, you can't style a
turbo-frame
in Safari — you can use it as an ancestor element in a selector but you can't apply styles to it directly.Thanks for this, I wasn’t aware.