Permanent nodes with iframes are reloaded

Question

Permanent nodes with iframes are reloaded

ruigomeseu opened this issue 10 years ago · 7 comments

I have a very simple test node with a Youtube player that should be playing throughout all pages of my website:

<body>
<div id="player" style="position:fixed; top: 0; left: 0; z-index: 1000000;" data-turbolinks-permanent>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/dz2iNkqFoKo" frameborder="0" allowfullscreen></iframe>
</div>
<div>
Rest of the site
</div>
</body>

When I change pages the iframe gets reloaded, wish shouldn't happen after the #479 fix.

Answer 1 · 2015-04-18T16:05:08.000Z

Here's an example for the behaviour described: https://github.com/ruigomeseu/turbolinks-permanent-bug

Answer 2 · 2015-04-19T18:12:35.000Z

This is a limitation of iframes — both WebKit and Firefox agree that they should be reloaded when they're moved in the DOM tree:
https://bugzilla.mozilla.org/show_bug.cgi?id=254144
https://bugs.webkit.org/show_bug.cgi?id=13574

It's even part of the spec now:
web-platform-tests/wpt#1286

So unfortunately we can't fix this in Turbolinks.

Answer 3 · 2015-07-20T14:43:44.000Z

Why move the node at all, though? This is an obvious case where the part of the DOM being updated is not in the direct hierarchy of the permanent node and should leave the permanent node entirely untouched. The only node that should be affected is the div containing rest of the site. The fact that Turbolinks does touch the permanent node is completely unintuitive.

Answer 4 · 2015-07-20T14:52:46.000Z

Why move the node at all, though?

Because we're replacing a parent of the permanent node (the <body>). When that happens, we need to move the node from its old parent (which was removed from the DOM) to its new parent.

The only node that should be affected is the div containing rest of the site.

That div is the <body>. Turbolinks doesn't let you specify a custom container. If this is your use case, check out jquery-pjax.

Answer 5 · 2015-07-20T14:56:35.000Z

Can't there be a way to specify don't replace the body itself, only children that are not marked permanent? It seems like such a common use case.

Answer 6 · 2015-07-20T15:00:50.000Z

That would be quite complex (what if a permanent node is nested in a div that has other children, page cache would need to be re-implemented, etc.).

Answer 7 · 2015-07-20T15:24:23.000Z

No-one said it would be easy. ;)

However, I'm talking more about a specific exception for how the body node is processed optionally. I'm not fond of the inconsistency of it, but the idea that there can be a node hanging immediately off of body that can remain untouched would at least provide a solution for everyone having an issue with this. If the permanent node is deeper down the hierarchy then it would be subject to current behavior.