Chrome is detected as Safari with javascript

4
votes

I am looking for a way to detect Safari with javascript. I know its been covered many times already but probably something got changed and it does not work anymore. At least in my case.

Here is what I do:

<script>

    if(!isSafari()){
      alert('not Safari');
    } else {
      alert('I am Safari');
    }


    function isSafari(){    
      var is_safari = navigator.userAgent.indexOf("Safari") > -1;
      if(is_safari){
        return true;
      }
    }
  </script>

jsbin: http://jsbin.com/ewerof/1

If you run this code in Safari and Chrome you will get the same alert "I am Safari" So how to actually detect Safari only? My Safari version is 4.0.3 just in case if that matters.

4
javascriptgoogle-chromesafaribrowser-detection
Why do you want to do browser detection? Feature detection is by far more reliable and stable! - Sirko
I'd wager this is because they both use Webkit. Maybe you should also check that the user agent does not contain the word "Chrome" ? - PhonicUK
@Sirko: There are cases where browser detection is necessary. It was addressed in this question about stackoverflow using browser detection in its code: meta.stackexchange.com/questions/138454/… - nhahtdh
@Alex: What exactly do you want to use browser-version detection for? - Marat Tanalin
As I heard safari has issues with tranlate3d and that is causing flexslider plugin get bugged with fixed position while scrolling. Probably I need to go deeper and try fixing it but so far I just decided to detect safari and disable it. - devjs11

4 Answers

14
votes

Chrome has both 'Chrome' and 'Safari' inside userAgent string. Safari has only 'Safari'.

So this works:

var is_chrome = navigator.userAgent.indexOf('Chrome') > -1; 
var is_explorer = navigator.userAgent.indexOf('MSIE') > -1; 
var is_firefox = navigator.userAgent.indexOf('Firefox') > -1; 
var is_safari = navigator.userAgent.indexOf("Safari") > -1; 
var is_Opera = navigator.userAgent.indexOf("Presto") > -1; 
if ((is_chrome)&&(is_safari)) {is_safari=false;}

if (is_safari) alert('Safari');

Or for Safari only, use this :

if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {alert('Its Safari');}

Credit: Kabamaru

2
votes

If you type this in a web developer console using Chrome:

navigator.userAgent

You will get a string, something like:

"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.92 Safari/537.4"

This string contains Safari, so you have to check specifically if the string also contains chrome. You can use a simple one-liner for that:

var is_safari = /^(?!.*chrome).*safari/i.test(navigator.userAgent);
0
votes

I'm using a newer version of Safari but this should still apply.

Safari's User Agent:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/536.26.14 (KHTML, like Gecko) Version/6.0.1 Safari/536.26.14

Chrome's User Agent

 Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.79 Safari/537.4

As you can see they both contain "Safari" (Most likely due to them both using WebKit). Your function only checks for Safari. So your function needs to check for "Safari" and make sure the string doesn't contain "Chrome".

0
votes

If you look at your user agent you'll see it includes "Safari" in the string;

Your User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.92 Safari/537.4

var xSAF = isSafari();

if(SAF)
{
    alert('Is Safari');
} else {
    alert('Not Safari');
}

function isSafari()
{
    var xUA = navigator.userAgent;
    if((xUA.indexOf("Safari")) && (xUA.indexOf("Chrome") == -1))
    {
        return true;
    } else {
        return false;
    }
}