Jquery toggle/click not working in Safari versions older than 9

Question

Currently having issues browser and device testing a website. The Jquery slide toggle navigation works on all devices and browsers apart from ones running versions of Safari below 9 (however Safari 9 works completely fine).

I have used the following code:

jQuery(document).ready(function($) {
   function toggle() {
     $("#nav").toggleClass("toggle") 
     $("#button_pannel1").toggleClass("toggle") 
     $("#button_pannel2").toggleClass("toggle") 
     $("#button_pannel3").toggleClass("toggle") 
   }

   $("#toggle_button").on("click", toggle);
});

I built this using the following code on Codepen (which also doesn't work on old Safari versions either)

Any help would be much appreciated.

Answer 1

The issue is not with your jQuery code.

You are missing the necessary browser prefix in your CSS to make it work on Safari in versions below 9. Where you have "transform: translate3d(-300px,0,0);" you need to also add "-webkit-transform: translate3d(-300px,0,0);" to the CSS rules.

Here you can see which browsers require prefixes in order for 3d transforms to work in CSS:

http://caniuse.com/#feat=transforms3d