React-joyride: Does not work overlay in Safari

[beautyfree]

As we found out, the method for determining the browser does not work for safari and this line return false as well as other conditions

If I add a class safari manually it fixes the problem

Safari 10.0.1
and also on the iphone Safari

[codyrushing]

I'm experiencing the same issue

It appears that the method joyride is using to detect safari is not valid in the latest versions of safari

[Firfi]

Same issue here.

[Firfi]

Also related to latest comments to most upvoted answer here: http://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser

Safari detection proposed there and used in this lib also doesn't work anymore.

[lcvbeek]

http://stackoverflow.com/questions/39120772/how-to-detect-safari-10-browser-in-javascript/39621764#39621764 says to update the line to this in order to detect Safari 10.

var isSafari=Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor')>0||!isChrome && !isOpera&&window.webkitAudioContext!==undefined;

I haven't tested it yet but wanted to share. Will update when I get the chance to test.

[gustavs-gutmanis]

@lcvbeek - I just tried it, it works!

However, the overlay in Chrome (haven't tested other browsers) gets botched. Instead of a single dark background it instead consists of lots of small darkened squares.

EDIT:

Turns out the problem was because isChrome was defined _after_ the isSafari var. Changing the order of definitions yielded successful results.

Here's the code that works:

  // Opera 8.0+
  var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
  // Firefox 1.0+
  var isFirefox = typeof InstallTrigger !== 'undefined';
  // Chrome 1+
  var isChrome = !!window.chrome && !!window.chrome.webstore;
  // Safari <= 9 "[object HTMLElementConstructor]"
  var isSafari=Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor')>0||!isChrome && !isOpera&&window.webkitAudioContext!==undefined;
  // Internet Explorer 6-11
  var isIE = /*@cc_on!@*/false || !!document.documentMode;
  // Edge 20+
  var isEdge = !isIE && !!window.StyleMedia;
  // Blink engine detection
  var isBlink = (isChrome || isOpera) && !!window.CSS;

@lcvbeek - you should do the PR, it's your solution that works :)

[lcvbeek]

@gustavs-gutmanis Haha no I just found someone else's fix. You actually tested it and applied it correctly, honor's all yours. :)

[gustavs-gutmanis]

Alright, buddy. I'll see what I can do.

[gilbarbara]

Hey, sorry for the delay.
Fixed in 3985491314ddd948a7b2a133a684725af476055e (1.5.1)

[gilbarbara]

Oops, test is broken. I'll fix it tomorrow.

[gilbarbara]

Alright, all fixed.
Published as 1.5.1