Angular 2 safari doesnt appear to work correctly - angularjs

I have a problem. I'm on angular2 beta 17 and my code works properly in chrome and firefox but in Safari my component doesnt appear. I get the data from firebase and put it in a component. Actually it is a chat, I get the messages from firebase. Getting the data is fast, but the messages doesnt appear until I manually put the focus in the input field. I have tried manual change detection but didn't work.
Any ideas what can be the problem or how can I solve this?
Best Regards

Related

React.js error page renders in Chrome but not Firefox

When there is an error because of X, in Firefox I can only detect this by looking at the console. The components still render. I've had this happen on other projects too, on different computers, making me think this is something I am going to have to address specifically for FF.
Versus in Chrome, where the helpful "error component" (IDK what this is called) renders, definitely making the developer aware. I've attached an image of this.
It's the screen that says this at the bottom: "This screen is visible only in development. It will not appear if the app crashes in production. Open your browser’s developer console to further inspect this error. Click the 'X' or hit ESC to dismiss this message."
I really want this to appear in FF. Any clue how? I do have React devtools installed, but that is not the thing driving this, as you don't even need that tool in Chrome to see this rendered.
This was the cause of an extension getting in the way.
I solved this by disabling a handful of extensions at a time until I got the error screen to load. Then I reversed the process until I narrowed it down to one extension.
The culprit was a form auto-fill extension.

React DevTools issue in Chrome

I am having an issue in Chrome only with the React DevTools. When I access my website, the React icon lights up and it acknowledges that React is in use, but the Components and Profiler tabs are not there. If I go to another website in Chrome that uses React, I can see the DevTools, so it's only my website. I've tried it on multiple computers and I still don't see those tabs. If I use Firefox React DevTools, it's works without issue. I've been digging around trying to find a solution without any luck. This issue only just began a few days ago, previously it worked just fine. The Redux-DevTools extension for Chrome does work for my website.
I didn't get a permanent solution yet but here is the workaround :
Change the chrome DevTools theme, only once it is required.
Now open devtools, you find the extension tab in DevTools.
You can again change the theme whatever you want to keep and this will fix your problem.

Lightbox2 Stopped Working on Chrome

Using straight-out-of-the-box lightbox2 (no edits, no mods). It has worked faithfully for the past couple of years since it's been in use. Suddenly noticed the other day that the image no longer fades in/out using Chrome. Image just displays on a new browser page. Works okay on Edge, but not sure about Safari as I've not yet checked that. Is this a Chrome issue? Any fixes?
I had the same problem. Tried many things.
Then I used "lightbox with jquery" javascript that's on their website: http://lokeshdhakar.com/projects/lightbox2
Update: It is not necessary to combine lightbox with jquery. The issue in my case was that I was using jquery older than version 2. If you user 2.0 or above version of Jquery, lightbox will start working again.

IONIC on IE9 not working

I've someone please could provide some workaround for this one?
If I run my IONIC application in IE9, i'm getting the error back:
Unable to get value of the property 'indexOf': object is null or
undefined ionic.bundle.min.js, line 6, character 31181.
When viewing the JS file. The exact line is:
var o=t.CSS.TRANSITION.indexOf('webkit');
Did somebody encountered this problem? Or has a fix for it?
I know that IONIC is meant for hybrid mobile dev, but I really need to get this working on IE9 also.
If you want it to be viewable in a browser for testing, then Chrome or Safari work just fine.
Support for IE desktop is not on the road map. Ionic's mission is hybrid apps.
http://ionicframework.com/docs/guide/preface.html119

AngularJS app is not loading on Safari (iOS 5.1.1) back button. Any suggestions?

I've ran into an issue with Safari on iOS 5.1.1 and Angular where I am doing paginated results. After I decide to leave the page that is hosting the app, and then come back to the page by using the browser's history back button.
The application is not initialized so as I scroll again, the pagination functionality is not triggered.
Since 5.1.1 doesn't provide a web inspector, I had to rely on console.log to print events that I want to see that it's executing. On initial load, I see everything ok, but when I am back through the back button nothing fires.
My usual ways of fixing this are not working. Here are the things I've tried:
Used manual bootstrapping of Angular app
Made the page not support caching and expire the page as soon as it's rendered.
Neither of these helped, which is why I am here asking for some suggestions. Unfortunately it's not a very easy thing to replicate through a Fiddle or a hosted HTML file so I am unable to provide one. Hoping that some of you may have experienced this before.
Thanks in advance for any help.
Answer is quite late and I hope you found a solution already but it might be useful for others.
Unfortunately I won't be able to answer why the app is not initialized (due to the lack of code) but I can give you some tools/tips to ease the debugging (assuming you have the iOS simulator).
Debuging on mobile safari can be done either :
with weinre and get the features of the web concole,
or by enabling remote debugging in Mobile Safari itself, see here
Yea, same problem here with iOS 7. It must send the DOM structure over before running any javascript. Kinda pointless...
Since the problem is with mobile safari and since it supports popstate event, you can use this event to detect when the user is back in combination with $location.path(), for example:
$(window).bind("popstate", function () {
alert(location.pathname + $location.path());
});

Resources