search

vuejs / vue

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core
http://v2.vuejs.org
MIT License
207.98k stars 33.68k forks source link

Safari (OS X and iOS): Some IFrames disappear when Vue is mounted #4419

Closed lewiscollard closed 7 years ago

lewiscollard commented 7 years ago

Vue.js version

2.1.4

Reproduction Link

http://codepen.io/anon/pen/XNYzdz

Steps to reproduce

Create an element that contains an <iframe> with the src to a YouTube video embed (explanation below) and mount Vue on the outer element. Load page with Safari on OS X or iOS.

What is Expected?

The contents of the <iframe> should be visible.

What is actually happening?

The <iframe> disappears on most page loads (you may need to reload the page to see this). It still exists in the DOM, and is sized appropriately, but the IFrame fails to load with an error in the network tab in Inspector, "An error occurred trying to load the resource".

@danielsamuels helpfully investigated it further and found that the same thing does not happen in Vue 1.0.28, so perhaps that will narrow it down somewhat:

https://output.jsbin.com/giludapuze

I chose a YouTube video for the example because this reproduces it most consistently. Setting the iframe source to a locally-served image with a locally-served Vue bundle does not seem to cause it.

We have reproduced this on:

Thanks for your time!

fnlctrl commented 7 years ago

Probably caused by some Safari quirks. String template seems to work fine: http://codepen.io/anon/pen/rWKJxV

yyx990803 commented 7 years ago

This is a Safari bug, removing an element containing an iframe causes other iframes with the same src still in DOM to go blank: http://codepen.io/yyx990803/pen/GNGwXg I suggest opening an issue at WebKit's bug tracker instead.

Not really much we can do in Vue since changing insertion/removing order is going to affect a lot of the patching internals and potentially lead to breaking changes.

As @fnlctrl points, the workaround is using string templates instead of in-DOM templates. It is more efficient too.

panagath commented 4 years ago

I'm having the same issue. VueJS on Safari stops working once I embed a Youtube video iframe. Any suggestions?