jQuery and CSS animation implemented on website performs flawlessly on all browsers, with the exception

I have recently started learning jQuery and I am facing an issue with the website linked below. It works perfectly in Firefox, Chrome, and Opera but not in Safari.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reverse Records - Click Me</title>

      <link rel="stylesheet" href="css/style.css">


</head>

<body>
  <div class='selector'>
  <ul>
    <li>
      <input id='1' type='checkbox'>
      <label for='1'>Option 1</label>
    </li>
    <li>
      <input id='2' type='checkbox'>
      <label for='2'>Option 2</label>
    </li>
    <li>
      <input id='3' type='checkbox'>
      <label for='3'>Option 3</label>
    </li>
    <li>
      <input id='4' type='checkbox'>
      <label for='4'>Option 4</label>
    </li>
  </ul>
  <div class="button1"></div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src="js/index.js"></script>


</body>

https://jsfiddle.net/dceh27we/#&togetherjs=jM21DCBopb

How can I make it work in Safari? Am I missing something?

Answer №1

Perhaps,
verify that the CSS properties you have utilized are compatible with the Safari browser

As an illustration,

animation-name,  -webkit-animation-name...

These are designated for specifying names in various browsers.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Toggle the visibility of a Div element using PHP and jQuery

I am attempting to create 3 buttons that, when clicked, display the content of a PHP file. Here is what I have done so far: In the main HTML file: <div class="buttons"> <a class="showSingle" target="1">Logg</a> <a class="showSingle ...

Having trouble bringing in SVG file into my React project

I am currently using React version 15.4.1 and I have tried implementing a solution from this link. However, instead of the component being rendered, I only see a string like this https://localhost:3001/dist/7553ed8d42edb0d73754cd9a5dea2168.svg This is how ...

How to Convert Pixel Units to Rem and Em in CSS?

Until recently, I developed my website exclusively using pixels, which has made it less responsive than I'd like. Is there a method to efficiently convert pixel measurements to rem/em units, allowing for quicker and easier modifications? ...

Unleash the power of jQuery.keypress for lightning-fast text processing

Looking to customize the keypress event for real-time text transformation as you type. Here's what I've tried: field.keypress(function(e){ field.val(function(i, val){ return val.toUpperCase(); }); return false; }); The input ...

Using the googleapis library within HTML is not permitted

I have been attempting to execute a simple function (uploadFile(test.txt)) within an HTML file, but I am encountering issues as my app.js and Google APIs are not being recognized or called. Node.js is throwing this error: Uncaught ReferenceError: uploadFi ...

What is the best way to tally data-ids within an anchor tag using jQuery or plain JavaScript?

find total number of data-id attributes within tag a I am looking for a way to calculate the count of my id attribute, whether it is in data-id or another form, using JavaScript. Edit ...

Is it possible to protect assets aside from JavaScript in Nodewebkit?

After coming across a post about securing the source code in a node-webkit desktop application on Stack Overflow, I began contemplating ways to safeguard my font files. Would using a snapshot approach, similar to the one mentioned in the post, be a viable ...

Having trouble incorporating a variable into a jQuery selector

Trying to crack this puzzle has been an ongoing battle for me. I seem to be missing something crucial but just can't pinpoint what. I recently discovered that using a variable in the jQuery selector can make a significant difference, like so: var na ...

Is Ajax still a popular choice for developing web applications?

Currently, I am developing a comprehensive ajax-based web application and have been investigating various frameworks for SEO optimization and history tracking. During my research, I came across an interesting framework at Although it seems promising, I no ...

Turn off automatic HTML correction in Google Chrome

I'm currently developing a NODE.js app that utilizes Nunjucks as its view engine. To ensure the validity of the HTML being generated, I've implemented tests to check if all tags are properly closed. My approach involves spinning up the applicatio ...

After pressing submit, any associated links should automatically open in a separate tab

I have a homework assignment that requires creating a form with multiple elements, including a checkbox. Once this checkbox is checked, the links displayed on the resulting page should open in a new tab. The catch? I can only use HTML and CSS - no JavaScri ...

What could be the reason for my CSS selector with :target not functioning properly?

I tried to implement the instructions I found online for using :target, but it's not working as expected. My goal is to change the background color and font color of #div1 when the first link is clicked, and to change the border of #div2 when the seco ...

Tips for implementing a single function across multiple HTML classes using JavaScript

For the past few days, I've been struggling with a JavaScript issue as a newcomer to the language. $(document).on('click', '.content-click', function(){ $(".content-click span").toggleClass("clicked"), $(".content-view") ...

If the given response `resp` can be parsed as JSON, then the function `$

I was using this script to check if the server's response data is in JSON format: try { json = $.parseJSON(resp); } catch (error) { json = null; } if (json) { // } else { // } However, I noticed that it returns true when 'res ...

Having trouble with jqGrid data format?

Having some trouble with jqGrid and displaying data in a treeview format. The issue is that the 6th item (cid=6) is not appearing in the grid. Additionally, it seems like the 4th item may have subitems, but expanding that branch reveals nothing. I cannot f ...

Unusual Box-shadow glitch experienced exclusively when scrolling in Chrome 51

While working on my website, I encountered a peculiar issue with the box-shadow in Chrome 51. My site has a fixed header with a box-shadow, but when I scroll up or down, the box-shadow leaves behind some marks (horizontal gray lines): https://i.stack.imgu ...

Create a PHP form that includes a dropdown menu for selecting the quantity, allowing users to insert multiple rows of data inputted into the form

My first time posting something here. The issue I'm facing is: I have an HTML form with various variables. A dropdown for Quantity that should insert the data into a MySQL table multiple times based on the chosen quantity. For example, if the dropd ...

PHP Question: Why are variables within <?php ?> not accessible within if/else statements?

I'm currently working on a basic program that involves the user inputting a number, which is then processed to generate a series of random similar numbers. After this step, the program prompts the user to select the correct variable, which will be va ...

Display real-time information fetched from sessionStorage (in JSON format) on a Listview widget

In my session, I have the following JSON data stored: Prescription: [{"medID":"id1","medName":"name1","medQty":"qty1","medDirec":"Directions1"}, {"medID":"id2","medName":"name2","medQty":"qty2","medDirec":"Directions2"}] I am looking to automatically dis ...

Tips for aligning the Bootstrap inline form in the center of the webpage

Is there a way to center align my form in such a way that the input box and button appear in the same row? I've tried the code below, but for some reason they don't display inline. Can anyone provide a code sample to help me achieve this? Your as ...