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

Problem encountered when trying to show the Jquery Ajax response on an HTML page

I'm facing a challenge with loading a page that needs to display values with dynamic pagination. To retrieve these values, I am making a REST call which returns a JSON object. Although I can see the JSON output in the browser console, I am unable to d ...

Functionality problem with adjusting font size in jQuery date picker

Recently, I integrated jQuery and datapicker features into my ASP .NET MVC 3 (Razor) project and noticed that the font size of the datapicker is exorbitantly large. Does anyone have any suggestions on how to adjust this issue? Your help would be greatly ...

The sticky positioning feature seems to be malfunctioning exclusively on mobile devices

I have encountered an unusual issue while working on my cafe-shop menu. Despite finding a solution in a standalone HTML file, the menu doesn't function properly when inserted into one of the pages of my WordPress theme - specifically, it only works on ...

Tracking progress with a dynamic bar from the beginning to the end

Struggling to develop a progress bar that corresponds to project start dates and end dates. With a roster of 100 projects, spanning from mid-2017 to future launches, the aim is to depict progress between 2018, 2019, and 2020. If a project commenced in 2017 ...

Show another default value once an option has been chosen

I am looking to create a functionality where, after a user selects an option, the input will change to display "select another option" instead of showing the name of the selected option. For example: <select> <option value="" selected&g ...

Efficient Pagination in CakePHP Using Ajax Search Functionality with POST Data

I am in the process of implementing a search functionality in my CakePHP 2.x project. Below is the controller code I have written: public function admin_index() { $this->Customer->recursive = 0; $this->Paginator->settings = array( ...

Issue with rendering components list in React.js

I am currently working on a project using React, and I'm facing an issue where my list is not displaying on render(). In my parent component, I have a list of components coming from SearchResult. Below is the relevant portion of my code: class Create ...

Expanding div width with jQuery as a percentage

Currently, I am facing a dilemma as I try to devise an equation for expanding the width of a div based on its current height. The Scenario Within this situation, there is a div that features a background image set to "contain." The original background ima ...

What is the best way to eliminate the space underneath a graph?

Despite trying multiple solutions, I'm still struggling to remove the excess blue space below the graph that appears when clicking the submit button. Any insights into what might be causing this issue? JSFIDDLE Below are the CSS styles related to t ...

Inserting a cell into a duplicated table while keeping the original table intact

I am looking to insert a new TD into a cloned table so that it exists only in the cloned version and not in the original one. This way, users won't accidentally remove the original table leaving nothing to be cloned :) Currently represented as follow ...

Explore all attributes of a specific tag in BeautifulSoup to locate a particular word

As I was working on a web scraping project to extract prices from a specific website, I encountered a coding challenge. Here is the code snippet I used: price = soup.findAll(['div'],{'class':re.compile(r'(.*?price.*?)',re.IGN ...

Error: A semicolon is required before the statement in an HTML select tag

I am struggling with the code below in my java script: var i = 2; $(".addmore").on('click', function () { count = $('table tr').length; var data = "<tr><td><input type='c ...

The canvas game's animation can only be activated one time

I am currently working on designing a straightforward canvas game: Here is the code snippet located on CodePen var canvas; var ctx; var x = 300; var y = 400; var r = 0; var mx = 0; var my = 0; var WIDTH = 600; var HEIGHT = 400; function circle(x,y,r) ...

Emphasis and dimension of form

I need help with a field that is supposed to have a black outline, similar to the one shown below: However, here is what I currently have in my code: .r{ height: 40px; font-size: 30px; width: 100px; font-family: 'proxima_novalight ...

Is there a way to grab code from a different HTML page using JavaScript and jQuery when the user clicks on something?

After testing various codes for the intended purpose mentioned in the title, I have observed a peculiar behavior. The code from settings.html appears briefly and then disappears rapidly. Javascript: function load() { $("#paste").load("settings.html") ...

Expanding the input focus to include the icon, allowing it to be clicked

Having trouble with my date picker component (v-date-picker) where I can't seem to get the icon, a Font Awesome Icon separate from the date-picker, to open the calendar on focus when clicked. I've attempted some solutions mentioned in this resour ...

Changing the CSS of ng-view when triggering CSS in ng-include: A step-by-step guide

Incorporating my left-hand, vertical navbar into the page using ng-include, I've managed to make it expand right on hover. Each page is enclosed within a <div class="wrapper">. My goal is to adjust the margin of each wrapper as the navbar expan ...

Creating a split hero section view using a combination of absolute/relative CSS techniques, Tailwind, and React

I'm in the process of creating a website using Nextjs, React, and TailwindCSS, and I aim to design a Hero section that resembles the one on the following website. https://i.sstatic.net/tq3zW.png My goal is to: Have a text title and buttons on the l ...

Why Isn't the Alert Triggering Even Though the Routes are Set Up Correctly in jQuery?

Here's the Setup: <!DOCTYPE html> <html> <head> <title></title> <script src="jquery-2.1.1.min.js"></script> <script src="script.js"></script> </head> <body> <h1>I ...

Displaying HTML Tags in jQuery JSON Response

Whenever I execute the following code: <html> <head> </head> <body> <?php $value = isset($_GET['send_request']) ? $_GET['send_request'] : false ; if ($value) { echo $value; return ...