- Safari Chrome Compatibility Nabble Forums And More Abundantly
- Safari Chrome Compatibility Nabble Forums And More Beautiful
- Safari Chrome Compatibility Nabble Forums And More Accurate
NOTE: The information on this page is out of date.
In Safari I can't sign in to HBBR but I can choose photos for most forums. In Chrome I can't post photos, and I can't edit my previous post! So you have to imagine the photo of my keel and bilge runners; keel in one piece as almost completely flat, bilge runners laminated from two pieces, both have plastic rubbing strips 10mm thick and I would happily drag the boat over concrete. Re: Safari/Google Chrome compatibility issue with main menu Post by meisenheimer » Wed Jan 27, 2010 2:36 pm CSS issues this deep are hard to diagnose without a live site to look at/mess with.
This page mostly contains information from 2011. Since then, Chrome has switched its rendering engine to Blink (a fork of WebKit).
The list is based on analysis of a large number of real-world sites with compatibility issues. It's important to note that in nearly all cases we've seen, the fixes required to get a Website working well in Google Chrome have been minimal. Developers are often surprised that problems that looked like they could take weeks of developer time were often solved in under an hour and matched closely with the list below.
Each item is described along with its solution, at the end we have a section that lists useful tools and points of reference that you may find useful in diagnosing problems.
Preamble - Google Chrome's rendering Engine:
Google Chrome uses WebKit (http://webkit.org/) to draw Web pages. WebKit is a mature (~9 years) open source layout engine used by Apple (Safari, iPhone), Google (Android, Google Chrome), Nokia and many other companies. Google Chrome aims to render sites exactly like Safari. This means that if your site works in Safari there is a large chance it will work in Google Chrome and vice versa.
Page not displayed correctly in Google Chrome, or you get a message noting that Google Chrome is not a 'supported browser'.
- Do everything you can to avoid this, parsing navigator.userAgent and navigator.vendor is notoriously bug-prone and usually the wrong thing to do! Object detection is a much safer method to achieve per-browser behavior...
- On Windows, Google Chrome's useragent string looks something like the following:
In nearly all cases you don't want to check if you're running under Google Chrome, but if the browser is using the WebKit rendering engine (see above). If you must look at the navigator.userAgent string look for the substring 'AppleWebKit', nothing else is guaranteed to continue working in the future!!
isWebKit will be true if you're running in Google Chrome, Safari or any other browser using WebKit.
To check the version of WebKit, use:
You can find a list of Google Chrome Releases and their corresponding WebKit revisions here.
- Avoid code like the following:
The problem is that the above snippet assumes that any browser not explicitly identified is IE. The problem is that it's far more likely for other browsers to act alike than it is for them to act like IE. And IE9 is very similar to all other browsers, so the code fork is bound to fail. Stick to feature detection instead.
A single line header wraps over multiple lines, messing up a site's layout. Text gets cut off or overlaps other elements.
HTML & CSS can't do pixel perfect layout. So font and element sizes can change slightly between browser versions and OSs. If a site depends on a font being an exact size then text can get cut off or wrap on other browsers or OSs.
Whenever possible, make use of dynamically sized elements rather than specifying fixed pixel widths. This is often easier said than done, but it ensures that content will adapt well to all browsers. Test your site in multiple browsers and OSs, enlarge fixed pixel width elements to accommodate the maximum size you see. Use the white-space:nowrap css attribute to ensure that single line headings don't wrap over multiple lines.
Your page looks garbled in Google Chrome. Garbage characters may be displayed, and RTL language pages (e.g. Hebrew or Arabic) may appear with their letters reversed.
If character encoding is not specified precisely, different browsers can interpret the encoding in different ways or not at all. The impact on users is dire since it prevents them from viewing the site.
- Declare your page's content-type correctly, this can either be in an HTTP header or a Meta tag specified in your HTML.
- The character set your page uses must be a legal value from the Official IANA List, please only use the encodings that have the text (preferred MIME name) listed next to them e.g. ISO-8859-1, Shift_JIS.
- If you specify two different values for the character encoding in the HTTP Header and the Meta tag, Google Chrome will use the value in the HTTP Header. Conflicting declarations of character encoding in the HTTP Header and Meta tag is asking for trouble. More information on this subject can be found here.
- We recommend using UTF-8 for all Web content. If you have to use legacy encoding for some reason, make sure to identify the encoding correctly as outlined above. For legacy situations involving Hebrew sites use Logical Hebrew encoding (ISO-8859-8-I). We strongly discourage the use of Visual Hebrew encoding (ISO-8859-8). It has no place on the Web anymore and is a remnant of old systems lacking logic for rendering RTL text. It causes many bugs and lots of confusion.
Plug-ins, such as Flash videos, Windows Media Player movies, or Java applets, do not appear in Google Chrome, but do appear in Internet Explorer.
There are 2 types of plugins on Windows: ActiveX & NPAPI. IE uses ActiveX plugins, all other browsers (including Google Chrome) use NPAPI plugins. ActiveX is Windows-only, plugins on other platforms usually use NPAPI.
Safari Chrome Compatibility Nabble Forums And More Abundantly
- Do not use plug-ins for which only an Active-X version exists, they won't work in Google Chrome, Firefox, Safari, Opera or any browser not using the IE rendering engine.
- Be sure that parameters in your <object> and <embed> tags are the same. A common problem is changing the parameter in only one of the tags, for example:
This embeds a flash video. IE will use the parameters in the object tag and thus will load the file flash_ad.swf. All other browsers will use the embed tag and play different_file.swf. Another common error is to specify different values for the transparency attribute when embedding flash.
Safari Chrome Compatibility Nabble Forums And More Beautiful
Some CSS styling does not work in Google Chrome, even though they seem fine in IE or Firefox.
- Do not use browser-specific (e.g. -moz-*, -webkit-*, -ie-*) css selectors such as -moz-center or -webkit-highlight for critical visual features of your site, instead use standard CSS.
- Do not use CSS expressions (e.g. width:expression()). These only work in IE, have serious performance issues and have been deprecated.
Safari Chrome Compatibility Nabble Forums And More Accurate
We've found the following tools extremely useful when diagnosing compatibility problems with Websites. Using them can greatly decrease the amount of effort and guesswork that goes into fixing compatibility issues:
- Google Chrome has a variety of built-in tools to help developers track down compatibility and performance issues.
- Fiddler - A free Windows-only tool that allows you to examine and replay HTTP requests and responses.
- Google Chrome Webmaster FAQ - Contains all the information in this document and loads more.
- quirksmode - Useful Information about which features are implemented in which browser.
- Reporting a bug in Google Chrome - guidelines and pointers on how to write an effective clear bug report.