Triggering a listener of a functional component breaks reactivity in Safari 12.1, if iframe is on the page

[mvy-siteimprove]

Version

2.6.10

Reproduction link

https://jsfiddle.net/ebgj6fra/2/

Steps to reproduce

• Access the fiddle
• click the "change" button

What is expected?

Hello world! should change to tada!

What is actually happening?

In latest Safari (12.1) on Mac OS, nothing happens, but it works as expected in other browsers.

---

Removing the iframe from the page makes the issue go away, as seen here: https://jsfiddle.net/ebgj6fra/3/

Seems like maybe there's a difference in how/when the latest Safari runs the flushCallbacks.

Conditionally rendering the iframe (v-if="myExpression !== null), triggering the listener inside a setTimeout or calling $forceUpdate circumvents the issue.

[posva]

Thanks for the boiled down repro 👌

[vanputten]

This issue still exists. Perhaps this should be mentioned somewhere in the Vue docs?

We used this as a fix in our main Vue instance: mounted: function() { this.$forceUpdate(); }

[jcroucher]

That example code seems to work when not within JSFiddle. I note that JSFiddle has one sandbox flag on the iframe as allow-same-origin.

If I remove the allow-same-origin to treat the code as foreign, then re-run the source, the button then functions as expected. By removing the allow-same-origin I am referring to inspecting the JSFiddle page source and removing the property.

Im wondering if its tripping up some sort of security?