Vue: Vue does not render on older versions of IOS

Created on 28 Oct 2017 · 5Comments · Source: vuejs/vue

Version

2.5.2

Reproduction link

https://lucasleandro1204.github.io/vue-content-loading

Steps to reproduce

Our primary users wont be having the latest phones and I see that sample Vue apps simply don't render on IOS (7.1.2) Safari => IPHONE-4.

Reproduction:
The vue demo here does not render on IOS 7.1.2
https://lucasleandro1204.github.io/vue-content-loading

But the equivalent React component does:
https://danilowoz.github.io/react-content-loader/

I have seen the same with other Vue apps also.
Please advise.

What is expected?

To see the app rendered

What is actually happening?

Seeing a blank page

need repro

Source

TimeBandit

Most helpful comment

Note to self: older browsers need babel-polyfill to add es6 features to the window.

TimeBandit on 31 Oct 2017

👍4

All 5 comments

Please find attached a reproduction folder. Run a local server using something like python -m SimpleHTTPServer and view on your device.
dist.zip

TimeBandit on 28 Oct 2017

Most likely because you are missing a Promise polyfill

On Sat, Oct 28, 2017, 3:18 PM Imran Nazir notifications@github.com wrote:

Please find attached a reproduction folder. Run a local server using
something like python -m SimpleHTTPServer and view on your device.
dist.zip https://github.com/vuejs/vue/files/1424255/dist.zip

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/vuejs/vue/issues/6948#issuecomment-340190280, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAefXsKDyaeS6hYpl7tz9Y5dmLFgflIeks5swymZgaJpZM4QJ7sd
.

yyx990803 on 28 Oct 2017

Hi Evan, Many thanks for responding. In response to your reply I added:

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>

just after the <body> tag and then just before the closing <body> tag. Neither had any effect.

The repo I am looking at is https://github.com/stefanpenner/es6-promise which actually seems to be a Vue dev dependency;

It seems that the template was not built with older browsers in mind. My users are not likely to have the latest phones so it's important to at least have some backward compatibility. Please advise.

Again many thanks for responding :+1:

TimeBandit on 28 Oct 2017

Can you reproduce the problem in a minimal jsfiddle or an html page (with no dependencies to other packages than vue, please)