Safari does not support JavaScript, while Firefox and Chrome do

My form has validation using Parsley. The submit button uses JavaScript code to animate via CSS. This works well in Firefox and Chrome, but not in Safari (both desktop and iOS). Validation is successful, but the animation doesn't play.

After some investigation, I found that the issue lies with the return true; statement. When set to return false;, Safari works correctly, but the form doesn't submit. Setting it to return true; makes it work everywhere except Safari.

I've come across information suggesting that Safari behaves differently with jQuery, requiring modifications to ensure cross-browser compatibility. How can I adjust this code to work universally?

<script type="text/javascript>
  $(function() {
    $('#login-form').parsley().on('form:submit', function() {
      $(".loginbutton").addClass("loginactive");
      $(".loginbutton").css("background", "transparent");

      setTimeout(function() {
        $(".loginbutton").addClass("loginsuccess");
        $(".loginbutton").css("background", "none repeat scroll 0 0 #ffffff");
      }, 3700);
      return true;
    });
  });
</script>

Answer №1

When it comes to Safari, the browser will halt any ongoing animation as soon as another element loads, whether it's a Python script or a different URL. Unfortunately, there isn't much you can do to avoid this behavior. In such cases, Safari will only display the initial frame of the CSS animation. This led me to make some adjustments to the login button to give it a distinct appearance and indicate that the form is processing the submission.

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

Separating JQuery from a bundled JavaScript file

Currently, I am combining all my JavaScript files into one (all.js) during the build process for performance and bandwidth optimization. To further enhance this, I decided to utilize jQuery.js from the Google API. https://ajax.googleapis.com/ajax/libs/jqu ...

Display the message "currently being loaded" on a Django platform

I'm a newcomer to django and styling and I have two things I want to address. First, I have an algorithm running on the upload file that takes time to load. I want to display a loading message until the output.csv file is generated and ready for downl ...

Mastering the art of using transitions in conjunction with display properties

I'm trying to achieve a fade-in effect with the CSS property display:block. Here's my HTML code: <div>Fade</div> And here's my CSS code: div { display: none; transition: 2s; } div:hover { display: block; } Unfortunately, thi ...

Execute Django code post webpage loading

Looking for a way to have the python code on the web page update every second if the database has changed, but currently it only runs on page load due to django functionality. function refresh(){ //Clear info boxes {% for TrackedObject in ...

Trying to access properties of undefined

I am having trouble adding the form control class to my select statement. The issue arises when props become undefined. Here's the code snippet: const useStyles = makeStyles({ root: { width: "100%", maxWidth: 500 } }); const cl ...

The overflow:hidden property prevents me from being able to scroll down the rest of my webpage

@import url('https://fonts.googleapis.com/css?family=Indie+Flower|Lobster|Open+Sans+Condensed:300|Roboto+Condensed&display=swap'); * { margin: 0; padding: 0; } html,body { height: 100%; width: 100%; margin: 0px; padding: 0px; ...

What specific regular expression pattern does jQuery employ for their email validation process?

Can jQuery validate email addresses? http://docs.jquery.com/Plugins/Validation Does jQuery use a specific regular expression for their email validation? I want to achieve something similar using JavaScript regex. Thank you! An Update: My Question I ...

Using PHP and MySQL to handle data submission through the POST method

When I send data to post[submit] and post[request], it's coming from two separate buttons. Even though I successfully submitted user_id to post[submit], I'm encountering difficulty in echoing the user_id in the request portion (post[request]). ...

Opt for Ternary operator over if..else statements in JavaScript

Is there a way to use a ternary operation or any alternative method instead of an if...else statement to simplify code in JavaScript? req.query.pr=="trans" ? util.transUrl(req.originalUrl).then(param => { res.redirect(par ...

My goal is to create a stylish form using bootstrap and CSS3

I am aiming to replicate the layout of this particular page: https://i.sstatic.net/HxOhC.png Struggling to utilize css3 for designing, how can I achieve a form similar to this? Facing difficulty in creating the outer red border and inserting spacing betw ...

Is there a way to retrieve the dynamically generated text content of an element using document.write?

I am encountering an issue similar to the following: <div id="myDiv"><script>document.write('SOMETHING');</script></div> My goal is to extract the content inside the script tag, which in this case is "SOMETHING" ...

The rendering of Bootstrap CSS does not display properly in weasyprint

I have developed a flask application that utilizes WeasyPrint to generate PDFs from HTML and sends them as attachments. However, I am facing an issue where Bootstrap 4 CSS is not being applied. I have tried various solutions but haven't been able to r ...

Guide to Wrapping Inner or Wrapping All Elements Except for the Initial Div Class

I am looking to enclose all the elements below "name portlet-title" without including other elements within the "div class name portlet-title". I have attempted the following methods: 1) $("div.item").wrapAll('<div class="portlet-body"></div ...

`Why is it important to debug javascript code?`

I have some outdated JavaScript code that surprisingly still works in Internet Explorer from 2000-2002, but refuses to function properly in browsers like Firefox, Chrome, and Opera. I've come across various browser quirks where different browsers inte ...

Transform JSON data into an array of arrays

For my project, I am using the python SimpleHTTPWebserver to serve up various files, including a valid JSON file named "file.json". In my javascript front end, I need to interpret this JSON object as an array of arrays. For example: { "val1": 101, "va ...

Executing multiple click events using JavaScript

I have recently started learning JavaScript and am experimenting with the following script: <script type="text/javascript"> $(document).ready (function() { $('#apply').click(function() { $('#applyinfo').toggle ...

Working with Jquery Ajax responses within Laravel

I am currently learning how to use jQuery Ajax and implementing it in a Laravel system. Below is the code snippet that I have written for this purpose, specifically in the analysis.blade.php file. <table id="grn_for_MC"> <tr> ...

Encounter issue when using GAS withSuccessHandler function

I've developed a Google Sheets add-on that utilizes a modal dialog for the user interface. I encountered an issue with the success handler not running as expected, so I created a basic test interface to troubleshoot the problem. After the server-side ...

I'm having trouble getting my jsonp to function properly. Can anyone help me troubleshoot?

I've been working on my website for the past two weeks, learning HTML, CSS, and a bit of JavaScript. However, I'm facing an issue with the following code that I can't seem to resolve: <head> <script src="http://ajax.googleapis.com/ ...

Issue with Bootstrap: unable to align columns vertically

I am currently learning how to use bootstrap, but I am facing a challenge with vertical alignment of columns. Despite trying various methods, I can't seem to get the content to align anywhere other than the top. Even starting from scratch with code fr ...