Hey this question is pretty general, but I'm wondering what the Javascript differences are in Mobile Safari and Safari for Mac.
I was under the impression that from a Javascript perspective they are the same, with only some differences in CSS/rendering. But I am experiencing a number of Javascript errors in Mobile Safari that don't exist in regular Safari on Mac.
Basically a number of calls to certain jQuery plugins are returning undefined values (according to the developer debugger in Mobile Safari).
The website that I'm experiencing these issues on has a very lousy front end that is riddled with validation errors, lousy JS and has an enormous amount of CSS attached. I have no doubt that this issue lies somewhere in this code, and I've never experienced issues like this before.
I'm just having trouble honing in on the problem, so any insight/links as to the general differences in Javascript engines would be much appreciated.
Javascript itself, the core language, is no different. There are a few significant differences in the DOM that appear undocumented, but mostly it is all the same. Here you can see some differences in events that you can handle.
The DOM differences I noticed had to do with measuring elements. For example getClientRects, at least for a Selection or Range, was not available. There are probably other things.
Before I add my two cents about differences in Safari depending on environment or build: the list of possible environments for Safari is bigger than just iPod, iPhone, iMac.
I am also dealing with: Safari for Windows (desktop) and Mobile Safari in iOS Simulator on iMac.
My jQueryMobile + PhoneGap app works nicely in Safari for Windows (desktop) and Safari on iMac, but it has the following problems in Safari on iOS Simulator on iMac Snow Leopard with XCode 3.x:
Google Analytics gets a "whitelist rejection" in iOS simulator.
My app hangs early on in the user's setup process through another problem
That other problem could be any of:
tags placed after element may not be loading
properly
calls to localDb may not be coming through
jQuery's events (pageinit,click,etc) may not come though in the same way
Related
I have a general question. I'm working on my first program in JavaScript and while I'm working on them I experienced some weird "broken browser"-problems.
During the weeks of work on my program I tested the project often on different browsers and computer systems. While doing it I observed weird behavior on Firefox and Chrome in specific versions. In both cases the program worked fine in both browsers then suddenly I experienced problems in Firefox on Windows on one machine. After some research I tried to update the browser and the problem was gone. The same experience I had on Chrome on Linux. It worked fine, then suddenly I had problems with Chrome 48. I tested the program on Mac and Windows, everything was fine. Then I recognized that the browsers on this machines has the version 54. So I updated on my Linux machine to the newest version and the problem was gone.
My Question: is it normal that such things happen with specific versions of browsers and if so, how to deal with it if you're working on bigger projects?
Edit: From the answers below I see that I was not clear with my question. The Question is not really about cross-browser compatibility than more about why a programm works in chrome v47, but not in v48, and then it works again in v54. Same for Firefox and other browsers.
You have to read about cross-browser compatibility.
Each browser may have different implemenations of specific functions or even do not have.
For older browsers like IE8 and less even simple window.innerWidth
doesn't work.
jQuery may help you. Its library which effectively provides cross browser compatibility for a lot of cases.
Another way to test if browser support some function is using Modernizr
You can also check support manually by websites like caniuse.com - works mainly for css styles but also js
currently I'm testing my website in which I'm getting a validation error message which should not come ideally.
The same things works fine in Windows Safari, but it fails in Mac Safari. Is there any difference in both the browser on how they handle Javascript and Ajax calls?
Thanks in adv.
Yes, in terms of interaction with the core systems - but the display and rendering of HTML, CSS and JS are identical as they use the same engine, WebKit. To read more about WebKit check this wikipedia article.
https://en.wikipedia.org/wiki/WebKit
It may be some sort of caching issue, I would suggest trying a private browsing session or clearing cache to test your JavaScript.
See also this question which talks about the rendering engine differences (of which there are none)
Differences between Safari for Windows and Safari for Mac
I am developing a web page primarily using Firefox. Often I encounter that my web page renders properly in Firefox but has some unexpected behavior in Chrome and IE.
Generally if its related to javascript, I usually open Developer Console in Chrome and see if there were any errors and that gives me a clue as to what might be wrong.
Unfortunately, I am generally lost if its a CSS related or HTML element issue.
In one particular case, I have placed a div inside a <td> and I am lost as to why the chrome cannot render it properly irrespective of the fact that firefox is happy and does not complain.
So my question is, how to debug issues related to rendering of HTML pages in Chrome and CSS and determine what might be offending.
My related question is, is there a guidelines to make my web page work in almost all the popular browsers with little effort? I am particularly thinking in terms of tool or process which will warn me of compatibility issues with my web page.
IE (Internet Explorer) and little effort doesn't match to each other, you have to invest more of your time and effort only for IE, illuminate IE and be happy, as a suggestion, use Twitter Bootstrap if possible, it's a ready and tested css framework (maybe framework is not perfect name).
Basically, as far as I know, only a css reset could be used to gain some consistency but still you have to test over different browsers because each has different rendering engine. If you want to keep IE in the list then test the layout for IE at first.
Only for the IE or Inconsistent Exposer (IMO) there is a developer tool available (IE Tester) to test layout (HTML/CSS) over different versions of IE and only works on Windows so it may help you a bit if you are Windows user. There is also an online tester available and sometimes helpful, it's browsershots.org.
Also IE has a debugger/developer tool and pressing F12 will bring it so you may see something like this:
Google Chrome has it's built in debugger/inspector (CTRL + SHIFT + I) and on Firefox you may use Firebug extension and these browsers are not dumb like IE and there are lots of debugging extensions available for these browsers for free, not worried about these good guys.
Generally speaking, IE users are dumb and used to see dumb things on their screen so I don't think too much about them because they really don't know the difference but as a developer you may need to think about it and in this case I would demand extra charge from my clients if they want me to make a site compatible for IE < 10 because it requires extra effort.
You dunno me ? Leh--hoo-zehar (Looser) IE am a legendhhh. Smooky...!
I am not aware of any tool that will warn you because there is no way for a tool to validate the result of what you desire.
As far as how to test HTML/CSS. Chrome supports the most HTML-5 and FF is a close second. If you develop in chrome it normally works in FF and via verse. IE is where the pain is. IE does not support all HTML tags and often will render things wonky. I normally create my webpage and focus on FF and chrome once I like the results I open IE and debug. 98% of the time it is CSS changes that need to be made. I debug CSS first and if I am not able to resolve it with CSS after a decent amount of work I will look into changing the HTML. I try to avoid changing HTML because you have to debug all other browsers again.
Styles and code developed in Chrome will generally work in Safari, Opera(same engine), and IE 10+ with few inconsistencies. You'll get a few rare positioning issues with some CSS3 specs in Firefox, specifically in background positioning. You'll also find some javascript issues unique to Firefox.
IE9 is generally a good sport and usually doesn't have too many issues. IE8 will have a few and they'll be significantly different based on the OS (as there are multiple versions of each IE and they all support different specs for Javascript and HTML) specifically you'll find lots of issues with XP IE8 and really shouldn't support it (Microsoft doesn't even want to).
For the most part you'll be developing to IE inconsistencies unless it's a CSS3 spec with the occasional javascript strangeness (which js frameworks generally can help with since a few of them were made with that goal in mind).
As far as tools, browserstack is nice but doesn't give you a lot of time. If what you're trying to use is modern caniuse is a good place to visit first. Almost all issues between non-IE browsers will be HTML5 or CSS3 specific though.
I've written an application that works great in the desktop browser but breaks in Safari.
Does Angularjs support the iPad's native browser?
I've been googling and can't find anything that isn't related to PhoneGap. It's just javascript in a browser isn't it?
How do you even debug this?
Solution
I was using reserved words like delete in my services which broke safari and not chrome. On both desktop and tablet safari is broken but chrome works. I have to switch the reserved words to something like remove.
http://paste.laravel.com/NNB
On the iPad go Settings > Safari > Developer > Enable Debugging
On top of safari you'll get a "1 Error" or "19 Errors" and when you click the bar it will list out the console for you.
AngularJS 1.0.7 works fine on my iPad (first edition) with IOS 5.whatever.the.last.supported.version.was! It's surprisingly quick, too, although Mobile Safari crashes with depressing regularity when it runs out of memory! This happens on many other web sites, though.
Instead of renaming the method you may change the way of calling it. For instance service['delete']() instead of
service.delete()
Same problem exists with method finally of promise object (older IEs even crash on call promise.finally()).
I asked a question yesterday that has gone unanswered. So I will just ask this:
What advice can you give me about Android 2.1 Web Browser and Javascript? How do you debug errors? What things do you avoid doing? What things do you make sure to do?
In a lot of ways, the Browser behaves like Mobile Safari on iOS devices. I need help with what makes it different from iOS devices.
The Android SDK is freely available, and includes an emulator that will allow you to run the browser that comes with the OS. So, you can test your site directly in an emulated device, if you don't have a device available.
There are some features for debugging via the SDK as well, see here:
http://developer.android.com/guide/webapps/debugging.html
Surely if it works in firefox etc and you have no errors via firebug then it should be fine. But you could try using firebug lite to debug any errors.
I know it this works even in IE6 so it should work in the Android browser.