Safari isn't rendering my single page application built in VueJS.

I have spent 2 weeks developing it. It contains ponents that show or not depending on user clicks. And data objects that are rendered via the "v-for" element.

In chrome all works perfectly!! In mozilla also...in safari the list doesn't show up. Why isn't safari rendering anything?? I can't even debug it..

I looked up work arounds, like polyfills...but these seem to not be supported by safari..so there's no point in implementing them.

Would love some support or insights guys..if there's no work around does that mean i have to go back a build it in JS + Jquery?

Thanks in advance

Safari isn't rendering my single page application built in VueJS.

I have spent 2 weeks developing it. It contains ponents that show or not depending on user clicks. And data objects that are rendered via the "v-for" element.

In chrome all works perfectly!! In mozilla also...in safari the list doesn't show up. Why isn't safari rendering anything?? I can't even debug it..

I looked up work arounds, like polyfills...but these seem to not be supported by safari..so there's no point in implementing them.

Would love some support or insights guys..if there's no work around does that mean i have to go back a build it in JS + Jquery?

Thanks in advance

• javascript
• safari
• cross-browser
• vue.js

• Never step back, try updating the safari browser, any errors in the console? – Srinivas Damam Commented Apr 4, 2017 at 13:31
• I'm pretty sure It doesn't have any relation with the VueJS, there is something wrong in your code. Do you have unit tests written and passed ? What console says ? – Belmin Bedak Commented Apr 4, 2017 at 13:40
• Is there anything in the console? What does the DOM look like? – Bill Criswell Commented Apr 4, 2017 at 13:46
• 1 hopefully you are talking about safari on mac and not on windows :) - most probably you will see errors on your console in that case - if not - you should simply console.log a few statements in critical methods (created, mounted, etc.) to check where everything fails. – Frnak Commented Apr 4, 2017 at 14:03
• 2 I would have loved to have more details about what happened for you, it might be the same as for me, and I am stuck here. Your question came up in Google, please share solution – kartsims Commented Mar 29, 2018 at 11:12

1 Answer 1

So, I had this same issue. Meaning, a series of ponents listed with a v-for but not rendered on the screen (or the DOM) only in Safari (on Mac) even though it worked just fine on Firefox and Chrome (even on Mac). And after long and hard attempts, I was able to resolve the issue. I will give the answer in two parts.

THE QUICK ANSWER

In my case, the render error was the end result of a date conversion gone wrong somewhere deep in my code in a helper file. Indeed, in this file, I was receiving an ISO date in string format and transforming it into a JS date object through new Date(myISODateString). While Firefox and Chrome handle this conversion just fine, Safari was producing 'Invalid Date' errors and the chain-reaction was only effecting a single ponent. Once I corrected this date parsing, everything was being rendered correctly in Safari. In this instance, I used Luxon to do the conversion, I will give that as the solution

DateTime.fromISO(myISODateString, { setZone: true }).toJSDate();

THE LONG ANSWER

I think what is even more valuable in this experience is how I found out that this was the problem since in your case, it will probably be some other particularity of Safari that is causing the error.

It was actually Frank Provost's ment on this question that guided me in the right direction. It goes without saying that smaller ponents are most of the time constructed from their props. It is like their life source. If props are erroneous, internal operations and render will also be problematic. So I decided to console, within the lifecycle hooks, the props that my non-rendering ponent was receiving. Of course, nothing was printed out to the console. So I went up one level above and did the same thing for the props of the parent ponent. This time, I was getting information in the console but there were variations in what is being printed to the console between Firefox and Safari. By the way, the props were not filled in at created or mounted in my case since they depended on an asynchronous network operation. So, my console debugging looked like this;

created(){
  setInterval(() => {
    console.log(this.myProp);
  }, 5000, this);
}

Long story short, by going up this way, ponent to ponent, variable to variable, I found out that I was relying on this date provided by my helper function in a helper file outside of my ponents and this was why no error was logged to the console at runtime even though multiple ponents were not being rendered correctly.