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

Vue breaking iframes on Safari (macOS + iOS) in Laravel 5.3 site #4444

Closed lpeterke closed 7 years ago

lpeterke commented 7 years ago

Hi! I'm encountering a very strange bug and I am not sure where to ask. If this is the wrong place, please delete.

I'm on a Laravel 5.3 application with Vue 2.0.1. At some places I am displaying embedded YouTube videos using the {!! !!} html output syntax from Laravel Blade. My main content is placed inside a <div id="app"></div>.

As soon as I'm binding a Vue instance to el: #app, all YouTube iframes stop working, doesn't matter if their code is inside or outside the <div id="app"></div>. The iframe gets rendered, but is empty. I only see a blank space of the provided width and height.

This issue seems to only affect YouTube iframes (testet twitch, that works) and only occurs on Safari (macOS and iOS).

simplesmiler commented 7 years ago

Possibly related to https://github.com/vuejs/vue/issues/4419

posva commented 7 years ago

@apocalyarts Can you check if it's the same happening in your case?

lpeterke commented 7 years ago

@posva @simplesmiler yes, I can confirm this. I can also confirm that the template workaround can help. I am displaying posts on my mainpage using v-for and YouTube iframes are working fine. I'm closing this issue as it looks to be a Safari bug like Evan explaned in #4419 .

I'll probably make a workaround component with a <template><div v-html="code"></div></template>