What Cross-Browser Issues Have You Faced

What Cross-Browser issues have you faced?

Most of the problems I have are with IE, specifically IE6. Problems I personally deal with that have left a memorable impression (in no particular order):

• Having to use frameworks to do basic things because each browser implements the DOM a little differently. This is especially heinous with IE and AJAX, which necessitates multiple if-blocks just to get the call started. In an ideal world I'd be able to work in JavaScript without the framework to do basic things.

• onChange on selects in IE are implemented wrong, and fire before the select loses focus (which is incorrect). This means you can never use onChange with selects due to IE, since keyboard-only users will be crippled by this implementation issue.

• You mentioned it in your post, but it's a huge pain when IE grabs an element by name when using getElementById().

• When in an RTL locale (Arabic, Hebrew, etc.), Firefox implements "text-align: right;" incorrectly. If the container overflows for some reason, the text aligns to the right side of the viewable container, rather than the right side of the container itself (even if it makes part of it invisible).

• Different browsers have differing levels of pickiness with regards to how you end arrays and objects. For example, Firefox is more than okay with an array looking like this: [ item0, item1, ]". However, this same code will make Opera barf because it hates the trailing comma. IE will make the array a three-item array, with the third item undefined! This is bad code for sure, but there's been dynamically generated javascript I've worked on that was a huge pain to rewrite - would've been nice if this just worked.

• Everything having to do with IE's hasLayout. So much awful pain has revolved around this attribute, especially when I didn't know it existed. So many problems fixed by using hacks to add hasLayout. So many more problems created as a result of the hacks.

• Floats in IE rarely work the way you hope they do. They also tend to be annoying in other browsers, but they at least conform to a particular behavior. ;)

• IE adding extra white space between list items has caused me no end of pain, since YUI uses lists to make their menus. (To fully grasp the issue, you have to view that link in IE and another browser side by side.)

• I have lots of issues getting text not to wrap in containers in IE. Other browsers listen to "white-space: nowrap" a lot better. This has been a problem with a UI I worked on that has a resizable sidebar; in IE, the sidebar items will start to wrap if you resize it too much.

• The lack of many CSS selector types in IE6 means you have to class-up your DOM more than necessary. For example, the lack of +, :hover, :first-child.

• Different browsers treat empty text nodes differently. Specifically, when traversing the DOM with Opera, I have to worry about empty text nodes when browsing a node's children. This isn't a problem if you're looking for a particular item, but it is if you're writing code that expects a particular input and the way the browser views that input differs.

• In IE6, when you dynamically generate an iframe via javascript, the iframe sometimes doesn't fill its container automatically (even with width and height set to max). I still don't know how to solve this issue, and have been thinking of posting a question about it.

• In IE, you can't set overflow CSS on the <tbody> element. This means that scrollable tables (with a concrete <thead> and <tfoot>) are impossible to make in a simple manner.

I will probably add more to this list later, since (to me) the worst part of web development are cross-browser issues. Also, I doubt I'll ever edit out the "I will probably add more to this list later", since these problems are endless. :)

@Font-Face cross browser compatibility issue

You have a comma and a semicolon mixed up. The correct block would be:

@font-face {
  font-family: 'RobotoLight';
  src: url('../font/jura-demibold.eot');
  src: url('../font/jura-demibold.eot?#iefix') format('embedded-opentype'),
       url('../font/jura-demibold.svg') format('svg'),
       url('../font/jura-demibold.woff') format('woff'),
       url('../font/jura-demibold.ttf') format('truetype');       
  font-weight: normal;
  font-style: normal;
}

Interview Questions for Javascript Problems

If you look around here for javascript questions, you will see the difficult problems people faced and often see how those problems were solved.

For myself, the most difficult thing I have done in javascript is paginate a large web page into many small ones to appear as a book. I solved it with lots of research and asking a few questions on SO.

Cross-browser compatibility HTML5 & CSS3

Sùmmary: it depends on your audience. There's no definitive answer to your concerns.

If your target is people who tend to own latest technologies, you can support browsers from 2 years onwards. In the other hand, if your target is people who love staying in old operating systems or you're talking about a large corporation/government, maybe you'll need to provide fallbacks or just skip using edge technologies in order to ensure a proper user experience across all target user devices and browsers.

OP said in some comment:

But I am not sure whether I have to completely scrap support to people
with old browsers and alternatively offer them with a mobile based
website for pc

If your target has latest tech, why you want to provide a mobile site for PC? You need to decide: if you think that you shouldn't support too old browsers and systems, you shouldn't try to maintain 2 sites when a great percentage of visitors will go to the "edge version". Otherwise, make your main site compatible with older browsers.

BTW, as I said before, there's no definitive answer to your concerns, because it's all about taking a decision and the time will tell you if it was right. Use analytics, check what are the most used Web browsers in your site and provide fallbacks when you detect that there's a high percentage of visitors using old browsers...

Browser Overflow ... How to ensure Cross Browser, Cross Platform Testing and Compatability

NOTE: I've altered the order of your questions to leave the longer answer at the end.

Your questions

What suggestions do you or your team have for testing new browsers as they come out?

Actually, as you said, Chrome and Firefox are continuosly delivering so it eases the process. The last version you have is mostly always the version the user has.

For any other browser (and Chrome and Firefox old versions) just select a version of each and act as a "high pass filter", testing any version up from the one you selected.

How do you decide when you will or will drop support for a browser version?

Take a look at the statistics of browser use. There are many resources such as statcounter, w3counter, w3cschools, or wikimedia. If possible, add an analytics tracker to your page and you will have data about what devices, platforms, browsers, and versions of them the visitors use to access the site.

What things do you do during development to decrease possibility of having code break when a browser update comes out?

The key is to use a well defined methodology, based on the existing standards. Continue reading for a personal recommendation.

Workflow to ease cross-browsing

Step 1: Bootstrapping

At first decide: Graceful degredation versus progressive enhancement. Both are valid techniques, but makes sense using the first to fix existing projects and the second for newly created projects.

Then select libraries to avoid typing existing code, focusing on the 3 languages: JavaScript, CSS, and HTML. HTML5 (+CSS3) is the better choice today but support for older browsers must be provided. The following libraries ease supporting them:

• modernizr for feature detection and conditional loading of js or css.
• jQuery for ajax and dom related tasks.
• normalize.css for normalize default browser styles, rather than just "resetting" them.

Notice that all of the js libraries listed above allow custom builds, an important thing when performance matters.

Html5 Boilerplate provides a strong template from which start the layout. It includes modernizr, jQuery, and normalize.css. Its github repository is a good resource to learn a lot about cross-browsing techniques. This article on its wiki has a nice set of links to start learning.

Step 2: Do the work

Designs should be mobile-first and responsive. This article on html5rocks introduces well why and how.

While "doing the work":

• Follow the w3c standards. Avoids using hacks, specially CSS hacks, when possible. Review often the HTML5 specification as it is pretty unstable.

• Take care of ECMAScript 5 features when writing javascript. Rely on libraries to avoid code breaks caused by deficient browser implementations. Do not extend the DOM.

• Automate tests when possible. Layout and specially layout polishing, including animations, are manually tested cause it's quicker but UI functionalities like form submision can be perfectly tested with automated tests.

• Use tools to ease tasks. Chrome + devtools or Firefox + firebug are the very basic must-use, but there are a bunch of tools to ease cross-browsing tests, even automating those tests.

Annex: Tools and resources

Cross-browser testing

• Browserstack is just awesome. Allows testing on all devices, platforms, browsers, and versions.

• Browserling is an alternative to browserstack. It is developed and maintained by Peteris Krumins and James Halliday, both recognized members of the node.js community and well-known developers. They also published a tool to automate the process called testling-ci, but this is only relevant if using node.js on the back-end.

• modern.ie provides tools to ease testing on internet explorer. Developed by Microsoft, the site provides live testing through browserstack and downloadable virtual machine images with pre installed software.

adaptability testing for "responsive design"

• respon.si is an online tool meant to test the visually appearance of layouts. It allows selecting a resolution so it's useful for responsive layouts testing. Notice that any other tool to select a resolution can easily do the same.

Should in-between browser compatibility issue be handled?

For auto updating browsers (Chrome, FX, Safari, Edge) support the latest version only. Corps can freeze on older versions, but supporting that older version is something you can both charge for and recommend against. If a client wants FX35 support then that would be a very singular request - it's not cost effective for you to spend time testing for it when you don't know they're going to want it. Spend that money on the versions the vast majority of customers are going to need first.

Also note that old versions are extremely high risk - FX35 is missing 2½ year's worth of security patches, I wouldn't even let a machine with it installed access our network.

For IE it's much messier. Currently 'live' out there are IE8, IE9, IE10 and IE11 - all with their own quirks and incompatibilities, all no longer actively developed and all pretty much dead in the non-corporate space (non-tech users with a new PC have to go out of their way to get IE11 rather than Edge, so won't). IE11 is a zombie - MS have stopped developing it and only patch security issues (until 2025), but it still shambles on consuming the brains of web developers everywhere.

For some time I think the best strategy in IE has been to support IE11 fully, and offer cut-down/missing functionality for IE8, 9 and 10 with very limited testing. If you find a bug in IE8 turn that feature off and recommend upgrading - IE8 users don't expect smooth animations and rich UI anyway.

This really comes down to a business case: supporting lots of old versions will cost you money, what money will it make? Define the budget that you have for supporting those old versions and then decide on the testing and support strategy that fits.

Facing CSS cross-browser conflict [issues on Mozilla Firefox]

Try this :

.a {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 background: -webkit-linear-gradient(red, green);
 background: linear-gradient(red, green);
}

Having problems with getting my margin-top to be cross browser compatible/

you need to wrap aside element in a div and then give a float:left; and remove positoin:absolute and margin:left from #slider and use same margin properties you have used for aside element.

Check the DEMO.

#slider
{
background-color:#e0e0e0;   
float:left;
margin:25px 0 0 40px;
padding:0 12px;
width:30%;
/*margin-left:370px;
margin-top:80px;
position:absolute;*/
}

.wrap{float:left;}/*contain all aside element*/

---

Related Topics