turbo-frame loading=lazy loads eagerly in Safari

It appears that the IntersectionObserver in Safari fires immediately on custom HTML elements. For some apps using lazy turbo frames, this is effectively graceful degradation (which is great!) but there have been a few blog posts written about using lazy turbo frames for infinite scroll (this one, for example, which links to a couple others).

In this use case, due to this issue in Safari, infinite-scrolling feeds will continue loading forever until the user reaches the bottom of the feed, the server rate-limits them, or their browser crashes.

[jgaskins]

Then I think your question has landed in the wrong place. This issue is about <turbo-frame loading=lazy>.

[jgaskins]

@filipemendespi None that I’ve tested, unfortunately. Turbo Frames being implemented in terms of custom elements is a fundamental design decision. As a workaround, you might be able to attach an IntersectionObserver to a standard element with a Stimulus controller and have that observer attach the src attribute to the turbo-frame element. I don’t know if that will work, but the basic idea is this:

On page load:

<turbo-frame id=“my-frame”>
  <div id=“my-frame-observer”></div>
</turbo-frame>

When my-frame-observer hits the viewport:

<turbo-frame id=“my-frame” src=“/my_data”>
</turbo-frame>

I believe this should kick off the request as expected, but I haven’t tested it yet. Note that this is just the HTML part of it and it doesn’t include any Stimulus wiring or even vanilla JS event handlers you’d have to implement. If I can test it out some time this week, I’ll update this thread.