Vue: IOS render issue

[ebecrm17]

Vue.js version

2.0.5

Reproduction Link

Vue example https://jsfiddle.net/pukea/ecbhaspa/
The project itself is here: https://ebecrm17.github.io/

Steps to reproduce

I'm building a single page application with live translation using Vue, it works OK on Desktop browsers and android, but I'm having a issue with IOS - it's not rendering at all.
I implemented this fiddle in my navbar and other blocks of the page and it seems that IOS doesn't support it (tried Chrome and Safari on Iphone 6, IOS 10+)
Also I searched stackoverflow and vue forum for this issue, couldn't find an answer.

What is Expected?

To render Vue and show the text from the objects

What is actually happening?

It shows as {{ page.content }} or {{ page.title }}

[fnlctrl]

Hi, thanks for filling this issue. The javascript code wasn't executed, probably because the browser you're using doesn't support ES6 let. Please see if this fiddle is working: https://jsfiddle.net/2eL1nxak/.
If you still get errors after changing let to var, please switch to the non-minified version of vue, and post the error log here, thanks!

[ebecrm17]

@fnlctrl , I used const in my page not "let"
There are no errors, chrome shows me that everything is OK even when I switch to mobile inspect (iphone 5, ipad), in reality it doesn't work.

[fnlctrl]

Please use the non-minified version of vue, since the minified one (vue.min.js) won't log errors at runtime.
Also, as a side note, are you using ios-webkit-debug-proxy to inspect iOS safari with chrome? Please try using OSX safari to inspect iOS safari.

[ebecrm17]

I've added the regular version of Vue and installed ios-webkit-debug-proxy. It says: you need to plug a phone to your computer...have no idea what to do, I'm using linux btw.

[yyx990803]

I ran your fiddle on iOS 10 Chrome/Safari and both are working fine.

[fnlctrl]

@ebecrm17 Chrome's mobile emulator only emulates screen resolution, not the real environment on iOS safari, so you're not really inspecting web pages on iPhone/iPad.
The only problem in your fiddle I can think of is the usage of let/const (which doesn't work in iOS 9.x). Please try changing them to var.

[ebecrm17]

I switched to var, it works on Iphone 6 (tested with browserstack). It doesn't work on Iphone 5 and Lumia devices. I think Iphone 5 uses an old IOS version, but LUMIA 930 with win 8.1 not sure what's the problem.

[fnlctrl]

Then it's not a iOS render issue caused by vue. Please check if your application code used some javascript features that aren't supported on your target environments. If you do believe it's a vue's issue, please follow up with actual error logs, thanks!

[ebecrm17]

thanks for helping!

[Jimtattersall]

If you didn't get sorted. A hacky solution is...
this.$el.querySelector('#videoPlayer').src =this.$el.querySelector('#videoPlayer').getAttribute('data-src')

All seems ok if the iframe isn't loaded up initially

[SimonYuan100]

I also met this issues, I solved it by changed function definition in methods from fnName () {} to fnName: function () {}

[nanadjei]

I had that issue fixed by removing window.location.pathname.match(/(?<=services\/).*/)