Determining Detached DOM Trees In Non-Chrome Browsers - browser

So with Google Chrome, I am able to take a Heap Snapshot which allows me to see if there are any detached DOM trees (which from my understanding, there shouldn't normally be any). Well I have an AngularJS application that is show a fair number of these and I am at the point where I am trying to verify whether or not this is a Google Chrome specific issue or an issue with all browsers.
The issue is that I can't find any tools to be able to see if there are detached DOM trees for FireFox, Safari, or IE. Do any such tools exist?

Yes the memory profiling tool in IE will help you find the issues. I think it may even be easier than Chrome's tool.

Related

Why browsers reveal fingerprinting information?

According to https://coveryourtracks.eff.org/ my Chrome and Firefox browsers disclose seemingly unnecessary information. Why those (and possibly other) browsers readily reveal any of that information?
Fingerprinting information that has nothing to do with serving:
Hardware concurrency
Device memory
Platform
Fingerprinting information that is needed only rarely (if at all) for serving:
User agent: browser and version
HTTP_ACCEPT headers: system language
List of browsers plugins
Timezone
Screen size and color depth; canvas hash
Audiocontext
WebGL vendor and renderer; WebGL hash
I think your'e mischaracterising this. Browsers don't deliberately reveal fingerprintable information; they provide information that is useful in lots of different contexts that also happens to contribute to fingerprinting.
Whether these are relevant for serving can't be determined from the client end. Historically, user agent and screen size/depth were critical in the days before the heavy dependence we now see on Javascript to achieve similar things, when differences between browsers and client platforms was much greater, and many sites are still built that way. For example my bank's web site still has obvious, visible workarounds for IE6. Prior to CSS media queries (around 2009), many things could only be achieved by telling the server about these things, and many of those browsers are still with us.
Knowing whether a browser supports a particular plug-in can also be critical - for example if I want to render a PDF in an iframe, your browser had better be able to render it, and it's useful for a server to know if it can before trying to use it.
You missed off fonts and battery level from your list. These are also very often part of a fingerprint, but at the same time useful for sites to know what to serve to a client.
Some clients deliberately add noise to these values. For example whether a battery is at 10.4% or 12.6% doesn't really make much difference – it's quite low, so adding 5% noise to this information retains its utility while reducing identifiability.
Precisely how much noise you need to add to preserve anonymity, or at least provide reasonable (and measurable) ambiguity of identity, is covered by the concept of differential privacy, which I'll leave you to read up on.

What is a "modern browser"?

I searched SO before asking this potentially vague question, found many references to 'modern browsers', but no definitions. Since this is a term very widely used and referenced, I was surprised that I couldn't find a definition or even a description on the Internet.
So, what, in June 2018, is considered a modern browser? And what is a modern browser in general, is it only the current major version of each popular browser (i.e. Chrome, Safari, FF, IE, Opera)?
Modern Browser: Reference:
A modern browser is any browser that: successfully renders a site that you just built using web standards, without you having written any browser-specific hacks, forks or workarounds; and shows great performance as you navigate it.
Modern Browser Advantages: Reference : Modern Browsers
Modern browsers are fast. They take full advantage of the underlying platform to render graphics with the GPU, compile and execute JavaScript across multiple CPU cores and ensure that web applications run as close as possible to the same speed as native applications.
Modern browsers enable rich, immersive experiences that could hitherto only be delivered through a plug-in or native application. They can blend video, vector and raster graphics, audio and text seamlessly without sacrificing performance.
Modern browsers implement features when they are ready, providing predictable patterns that developers can rely on rather than suddenly breaking or removing specifications. They don’t check off support based on a half-completed implementation written to pass a synthetic test, but validate against a test suite that confirms interoperability.
Modern browsers do adopt standards at an early stage of readiness so developers can experiment and validate the specification, but clearly delineate unstable prototypes as such.
A modern browser is any browser that: successfully renders a site that you just built using web standards, without you having written any browser-specific hacks, forks or workarounds; and shows great performance as you navigate it.
Reference.

At which point do you decide to stop supporting older browsers?

I would like to start a community discussion. As per my question, when do you decide to stop supporting older browsers?
I've nearly completed the development of a large personal application. It uses a lot of HTML5, CSS3 and JavaScript. If I were to support older browsers, I would estimate that it would increase my front end work load by at least 50%. And to be frank, I don't want to support the older browsers. From a business point of view, one could argue that if I don't, I could lose revenue. I disagree. I feel that the customers who use older browsers wouldn't be the customers I would want anyway - they would be the ones giving me more work as I'd have to fix compatibility problems in my application to work with their old browser or have to continually tell them to upgrade their browser. If the web is to move on, then people need to stop supporting the older browsers, however, I do see that the tide is slowly starting to turn towards this.
Recently, IE6 was pronounced dead. When can we safely say that IE7 and IE8 or indeed Firefox 3 can longer be considered as 'important' enough to support?
Furthermore, I hear a lot of people say on this site "make sure it degrades gracefully so it'll still work with browsers that don't have JavaScript support"? What kind of browsers now don't have JavaScript support? Mostly old phones and if these old phones don't support JavaScript then I highly doubt that they will parse the HTML correctly either. I also have a Sencha touch mobile version of my application. Am I going to make a WAP version of it to support older phones? No. It's a rich web app. That's how it has designed to be and that's how I intend for it to stay.
I rather like Apple's approach: If you upgrade your OS, don't expect your apps from the previous of the OS to work with the new one. Yes, it can be a frustration, but it means there is less of a mess overrall and people are forced to upgrade to move along with the times.
It works the same way for new web apps, if I want to keep them clean, quick and efficient, I need to stop hacking the code to support legacy software and if users don't like it, they can move on from my site or join the rest of us and upgrade their browser and have a better web experience.
I don't want this to come across as arrogant, but I am genuinely interested in your opinions when you consider enough is enough and only support recent browsers.
For me, I have always assessed the users who would be using it. I think in the end, it is impractical to support every single browser and its version under the sun.
As a baseline, I always ensure that the application works fine in IE8 and the latest version of Firefox. IE8 is pretty decent, so there usually isn't much work required to get it working. As most versions of Firefox and Chrome tend to get auto updated, I just test in Firefox Latest, Firefox 3.Latest and the latest version of chrome.
For example, if I am designing an application to be used by tech-heads, I wouldn't really care much about IE7 and below, or old versions of Firefox and Chrome.
However, if I am designing something that will be used internally and there are certain browser requirements, then I will make sure that the app works perfectly in those browsers (i.e. the dreaded IE6 and IE7).
As IE8 is the "final" version on Windows XP, I think it would be quite beneficial to ensure that things work decently in IE8 at least.
Also, since Facebook and GMail has dropped support for IE7 and below and older versions of other browsers, I think it's safe to say that we can ignore those versions too.
As for javascript, I think it is impractical to build something that works exactly the same without javascript. I think it is a good idea to gracefully degrade, so that certain things might not be avaliable for the user, but they can still use the app to a certain extent.
However, in certain cases, the whole app would not be able to work without javascript (or a non-javascript experience would be next to useless), then telling the user to enable javascript is probably a good idea. This is implemented in apps like Facebook and Google Docs. See this excellent blog post for some debate.
So, in summary:
Develop for "modern browsers", IE8+, FF3.latest and the latest FF, latest Chrome and Opera.
Support other browsers if the development/client requirements exist.
Look at what the big boys (facebook and gmail) are doing in terms of browser support. If they can afford to drop support for browser x and we are developing an app targetted towards general consumers, then we can afford to drop support for browser x too.
I agree with you on the most part that it is a pain to support older browsers and I think that creating web applications that are supported on older browsers such as IE6 and IE7 should be stopped because it is our duty as developer's to help the web advance even further.Furthermore Google has dropped support for every IE browser under IE8 and these in my agenda means that the browser is as good as dead and I can safely stop to create websites for it.
IE8 is a decent browser and is still very widely used even if it's usage is being dropped at an increasing rate : browser usage statistics ; I still think that you should develop for it at least a year from now when hopefully it's usage will be to small to matter
Firefox ,Safari,Chrome and Opera have auto updates witch popup to the user every time a new version is released so most of the times I don't bother checking for older versions how my websites work.
But about the graceful degradation of your websites I still think you should try as much as possible to make your websites work even if you have Javascript disabled because not all users have old browsers that don't support Javascript but there are those who keep it turned off for various reasons

Kiosk program (web browser), deployment struggles

Okay, here's a complicated one I've been breaking my head over all week.
I'm creating a self service system, which allows people to identify themselves by barcode or by smartcard, and then perform an arbitrary action. I run a Tomcat application container locally on each machine to serve up the pages and connect to external resources that are required. It also allows me to serve webpages which I then can use to display content on the screen.
I chose HTML as a display technology because it gives a lot of freedom as to how things could look. The program also involves a lot of Javascript to interact with the customer and hardware (through a RESTful API). I picked Javascript because it's a natural complement to HTML and is supported by all modern browsers.
Currently this system is being tested at a number of sites, and everything seems to work okay. I'm running it in Chrome's kiosk mode. Which serves me well, but there are a number of downsides. Here is where the problems start. ;-)
First of all I am petrified that Chrome's auto-update will eventually break my Javascript code. Secondly, I run a small Chrome plugin to read smartcard numbers, and every time the workstation is shutdown incorrectly Chrome's user profile becomes corrupted and the extension needs to be set up again. I could easily fix the first issue by turning off auto-update but it complicates my installation procedure.
Actually, having to install any browser complicates my installation procedure.
I did consider using internet explorer because it's basically everywhere, but with the three dominant versions out there I'm not sure if it's a good approach. My Javascript is quite complex and making it work on older versions will be a pain. Not even mentioning having to write an ActiveX component for my smartcards.
This is why I set out to make a small browser wrapper that runs in full screen, and can read smartcard numbers. This also has downsides. I use Qt: Qt's QtWebkit weighs a hefty 10MB, and it adds another number of dependencies to my application.
It really feels like I have to pick from three options that all have downsides. It really is something I should have investigated before I wrote the entire program. I guess it is a lesson learnt well.
On to the questions:
Is there a pain free way out of this situation? (probably not)
Is there a browser I can depend on without adding tens of megabytes to my project?
Is there another alternative you could suggest?
If you do not see another way out, which option would you pick?

What percentage of marketshare does a browser need for your support?

I'm building a website for a small non-profit org. and I was wondering at what kind of browser marketshare a browser should have before I support it. Chrome looks like a major contender, but it's still less than 5%, as is Opera.
What browsers do you think I should completely support for this kind of project?
I'm going to second Robert S's answer, and expand a bit.
If you take the time, from the initial concept forward, to be standards-compliant and emit clean XHTML with CSS, you'll save yourself the majority of the pain. You'll probably be fairly close to your intended output across all the browsers right out of the gate. Sure, there will be some pixel-level wonkiness due to the way the box model is implemented, but you'll probably be "close enough" that no extra expense is needed.
I wouldn't go so far as to intentionally "tweak" my site to be sure it works with every browser -- not only is that expensive (in terms of time), but it's also doomed to fail as browsers come closer and closer to clean support for the standards.
FWIW, Chrome is a browser you absolutely should test with. As others have mentioned, it's based on Apple's WebKit. Testing Chrome and the Windows version of Safari will give you a very good handle on your site's user experience on the Mac platform, at least if you don't have a Mac available for testing. :)
Firefox, IE7 and IE6 are enough to cover more than 90% of the browser market share.
It is a good idea to read the new web standards and take in account what Microsoft prepares for IE8.
Then you can try to be compatible with Google Chrome.
Finally, there should be a very specific customer request to invest the time and money making support for the other browsers like Opera, Safari e.t.c.
Here's my testing/bugfixing priority list:
Absolutely essential to fully support Firefox 3 and IE7
Highly recommended to fully support Opera and Safari (no missing functionality, slightly degraded interfaces are acceptable, but only if absolutely necessary)
Interface degradation is acceptable with IE6 and Firefox 2 as long as it is still usable (I consider these as 'end of life' browsers, and frankly, rarely worth the effort), also here are older versions of Opera and Safari, but I rarely see significant problems with these.
If the interface does not rely heavily on Javascript then it must degrade gracefully enough to be usable in text based and mobile browsers such as Opera Mobile, Links/Lynx, iPhone, etc (this includes any necessary optimisations for the screen size)
Informational (i.e. non-application) sites must be at least tested with a screenreader
I will put no significant effort into supporting Firefox 1 and IE5.5 or below.
New functionality must be tested and at least working with upcoming browsers such as IE8 and Chrome. It's pointless ignoring these, as they are both likely to become very popular in the coming months and years.
Of course, the only way to know for sure what will work for you is by looking at your own usage statistics. You may find that a significant proportion of your users still use IE6 (many businesses have yet to upgrade), or that mobile device use is particularly high, etc. Check your own stats!
It's not a matter of market share. It's a matter of what our customers use.
When your customers are public schools that are often underfunded, then you eschew a lot of flash and Flash.
The obvious answers are Firefox and IE. I would suggest starting with standards-compliant XHTML and then go from there.
I don't make this decision based on marketshare alone, or even primarily. My support list (in order of priority) currently looks like this unless a client expresses a need to expand it:
Safari 3
Firefox 2
Firefox 3
IE 7
IE 8 beta
public-facing functionality works, looks correct, in IE 6
Chrome
The reason I take this approach is that, first, it's best to work in a standards-compliant browser before tweaking to broken engines. Second, Safari has the greatest standards support combined with a marketshare which isn't negligible (Opera is just hard to justify for cost:benefit reasons). Third, in my experience going from Safari to Firefox is usually less problematic than the other way around. This is subjective but it's my experience.
Also a side effect of targeting Safari first, IE is likely to be less painful, as the Webkit team has gone to great lengths to comply with existing practices wherever possible.
Chrome comes last because it's so likely to "just work" if Safari is good to go.
Edit: Firefox 2 comes before Firefox 3 because its support set is more restricted. The same is true for IE 7 before IE 8b.
Well, since Chrome is based off of WebKit, if you test for Safari, chances are Chrome will work as well.
I tend to ignore Opera altogether. That probably makes me a bad person, but I'm ok with that.
it depends how critical the application is.
for a small non-profit, I [personally] wouldn't bother testing with browsers with < 4-5% share. However, you should still aim to develop your code as browser agnostic as possible
I personally agree with Andy Lester in that the true key is to understand the platforms of your target audience. Yes globally Chrome might have a 3-5% market share, or something like that, but if your not-for-profit organization was targeted towards developers you might have a much higher rate of adoptions. So in addition to what everyone has said here, know your audience.
I know with my website targeting technology people, I see about a 30% FireFox, 55% IE, 12% Chrome, and the rest are others for my visitors. Vastly different from the norm due to my audience.
I like to keep a close eye on Yahoo's Graded Browser Support page. I generally only spend time on worrying about getting everything perfect on browsers they consider to be 'A-Grade'. I generally try to progressively enhance, instead of gracefully degrade which means in most cases I get basic functionality on 'C-Grade' browsers.
http://developer.yahoo.com/yui/articles/gbs/index.html
I personally like to group browsers in two broad categories:
IE: You should always aim to support IE, given its market share.
Others (Firefox, Opera, Safari, Chrome): If you strive to write standards-compliant HTML, CSS and JavaScript, what works in either of these browsers will most probably work with the rest.
Start with Firefox and IE. If you have any time left, which you probably wont, you can check out the others :)
IMHO the more important thing to do is do a good job of separating your presentation tier from your business logic. Try to be as flexible as possible and allow the users to decide the direction. You might now say, Webkit doesn't have enough users, but a month down the line your client decides to buy iPhones for all their employees. (I know you said non-profit, but I think example still holds) Just try to put yourself into a position to be flexible.
I would recomend that you will try to comply with the standards issued by w3. If your application comply you will also be safe for future versions of browsers.
Make your design using FF and make fixes for IE in the end, that way you will save work.
Regarding JavaScript use a framework such as JQuery or DomAssistant to make code that will work on all browsers. But be aware not to make navigation or content dependant on client script, provide an alternative to support almost 7% that is not java enabled.
Do the standards-compliant engines first: WebKit (Safari/Chrome) and Gecko (Firefox). Opera usually works okay, too. Then go and add IE support. Any browser whose preview release doesn't support the full CSS2 spec doesn't deserve A-grade support, IMO.
Firefox 3, IE 7, IE 6
Firefox is the most important primarily because it runs on OSX and Windows and has a high market share which means if your site runs on Firefox it will also be available to mac viewers. Follow this closely with IE 7 which is important because of its browser share and being packaged by Windows means anyone with a new windows box will have it.
Unfortunately there are people running older versions of windows (anything before 2000) who cannot update from IE 6 to a more modern browser. This ensures there should be for the next while there should be a lower cap of about 10% of people using IE 6. Realistically there are about 20% average who still user IE 6 and so this indicates that even some with modern operating systems have not upgraded.
Safari and Chrome come hand in hand as both working off a similar engine which makes them the next logical step for compatibility tests. Because they both use webkit and safari runs on both windows and mac (as the default browser) Safari is more important to test for by a small margin. Chrome is a logical choice because if you get it on Safari it will work on Chrome and it has a pretty strong start in browser stats for being so new.
Opera is completely optional unless you decide that you want to develop a website that must be viewable on a Nintendo Wii. Anyone on a computer who can use Opera is most likely savvy enough to also have another browser installed which they can view your site with. Opera uses its own custom parser and it has low browser share and so there isn't a compelling reason to go to lengths if your site shows well on everything except for Opera. The onus is really on them to make their browser work on your site honestly considering the low numbers and the other stronger browsers.
Unfortunately IE 6 and IE 7 both require a filter hack to get opacity to work and IE 6 has many incompatibilities and still requires a box model hack when not in strict mode and has float bugs regardless and so following web standards to the letter isn't an option, but wherever possible if you do follow web standards and use conditional IE comments you will most likely have a site that runs cross browser with minimal headache.

Resources