massive problems on older safari browser

hello semicolon

the small website https://www.elflein-kosmetik.de/ is now online for a few days. family & friends are etsting it thoroughly on all kind of deviced / OS / browsers and it seems to do pretty well.

today a customer called me and mentioned that the site is not running propperly at all on her safari.
I checked it with her via screensharing and yes it really breaks completely.

browser is safari 10.1.2 on an older macbook running OSX Yosemite.
she can and doesn't want to update her macbook (older lady).

so I investigated the errors:

• the slider doesn't animate the flying in text
• the header does not stick
• cols in rows like they should in #section-treatment 3x2 but stack vrtical one beneath each other
  this one is the only one I could inverstigate, seems a bootstrap for problem and
  .row:before, .row:after {width:0px; height:0px;} in custom css fixed, allthough I do not know if it has influence on other brothers?
• all modal links do not work at all, no modal shown
• no scrolling links like https://www.elflein-kosmetik.de/anwendungen.html#treat-biorepeel work
• on https://www.elflein-kosmetik.de/anwendungen.html the top buttons that should scroll to the sections do not work at all

I attached a screenshot of the console, maybe you could have a look at it?

this on seems a real bummer. I checked some analytics online and there is quite an amount of users on macs still running older safari versions, so all of the are kind of locked-out from using our site.

I know that you are using the newest techniques and I appreciate that.
allthough I think we have to consider prple running on older browsers. and yosemite on mac is not that old, wanna say quite some users running that version.

is there at leas maybe some way to check the safari version with some simple JS and have an alert, that the browser is that outdated the website will not work and therefor we kindly ask to use some other brother?

rgds,
guido

oops forgot the attachment

and by the way the cookie modal does not pop up either, wich is not part of your package but a typo3 extension

and one more thing I write in private mode.

it is a pitty that here in forum we cannot reply to other users threads.
I would be happy to help out a bit other users.

eg. this question
http://support.semicolonweb.com/forums/topic/modal-link-using-text-no-button/
I could have easily answered as well.

users hepling users might tae some load from you guys.

rgds,
guido

I digged into your code as est as I could but thats far beyond my skills :-(
this only seems to happen on safri browsers < version 11
so maybe you could help me out with a sniüüet of JS ?

something like

if
safari < version 11
show alertbox

rgds,
guido

meanwhile I have organized an older macbook running yosemite and safari 10.1.2, so I can reproduce these error and di furtzher into debugging testing.

hep would be still highly appreciated.

thx & rgds
guido

hello semicolon

this problem really causes me headache :-(
as the cookie-policy popup does not work (besides the scrollto problems and links modals not working) I am afraid of any unsuccessful lawyer who has got nothing else to do than check for websites without proper cookie policy and EU/german DSGVO (data security advice) and than open law cases, I am desperately looking for a solution to this.

of cause best would be if I could get it up and running for old safari too, but on the other hand at least a solution with JS browser detection and redirect to an info page like "you use old safari, sorry please try firefox ... blabla" would be the minimum solution.
so I surfed the web and found sth like this and tested it.

var nAgt = navigator.userAgent;
var browserName  = navigator.appName;
var fullVersion  = ''+parseFloat(navigator.appVersion); 
var majorVersion = parseInt(navigator.appVersion,10);
var nameOffset,verOffset,ix;

// In Safari, the true version is after "Safari" or after "Version" 
if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
 browserName = "Safari";
 fullVersion = nAgt.substring(verOffset+7);
 if ((verOffset=nAgt.indexOf("Version"))!=-1) 
   fullVersion = nAgt.substring(verOffset+8);
}

// trim the fullVersion string at semicolon/space if present
if ((ix=fullVersion.indexOf(";"))!=-1)
   fullVersion=fullVersion.substring(0,ix);
if ((ix=fullVersion.indexOf(" "))!=-1)
   fullVersion=fullVersion.substring(0,ix);
majorVersion = parseInt(''+fullVersion,10);

if (majorVersion 

it seems to work if safari lower than version 11 redirect to browserTooOld.html where I could explain why and how to use different browser.
as I am by no means a JS crack, I would appreciate you telling me if this is a good work-around or if different code would be better.

best of cause as mentioned would be a working canvas site even for old safaris.

rgds
guido

hello semicolon

sorry for me not understanding you right.
you are talking about the file js/plugins/jquery.youtube.js

I tried both suggested fixes.

a) renamed js/plugins/jquery.youtube.js to js/plugins/_jquery.youtube.js
b) changed all let to var in js/plugins/jquery.youtube.js

• error still the same and site broken. see console screenshot.
• no modal popup works, see screenshot.
• scrollr for links like https://www.elflein-kosmetik.de/anwendungen#section-microderma dont't work
• animation in slider on homepage does not work

did I get your right with the fiYT js file or did I mix up sth?

rgds and thx
guido

stupid me

found in plugins.js and deleted the code, now it works ... super !!!
one more question please.

what about the code in functions.js that is not defined now?

awesome support
site runs now like charm even in old safaris !!!

you guys are the best html developers I know and I promote your template where ever I can.
seems me becoming a kind of "canvas-evangelist" :-D

thx and rgds,
guido