hakimel/Ladda

Not working on Safari after form submit with page reload

Opened this issue · 18 comments

timgavin commented

Using Safari 11.0.1 / macOS High Sierra

I've been having issues with Ladda lately in Safari, so I created the following page to test, keeping it as simple as possible. Ladda does not work; no spinner...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/Ladda/1.0.5/ladda.min.css" rel="stylesheet">
</head>
<body>
    <form method="POST">
        <button type="submit" class="ladda-button" data-style="zoom-in">
            Submit
        </button>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Ladda/1.0.5/spin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Ladda/1.0.5/ladda.min.js"></script>
    <script>
        Ladda.bind( 'button[type=submit]', { timeout: 2000 } );
    </script>
</body>
</html>

I tried the following Javascript too with the same result: no spinner

$('form').submit(function (e) {
    var l = Ladda.create(document.querySelector('.ladda-button'));
    l.start();
});
timgavin commented

After playing around a little more, I'm starting to think that Safari just submits the form so quickly that Ladda doesn't have time to load. If I put in a dummy URL, submit the form and then hit the back button I'll see a frozen spinner.

If this is what's actually happening... is there a workaround for it?

theodorejb commented

I don't have a Safari browser to test with, but I think you are probably right about it submitting the form before you have a chance to see the spinner.

In my opinion (I'm not the original creator of Ladda) it's not a good idea to use the bind function, as it is somewhat hacky and can lead to issues like this. I would recommend only using Ladda for AJAX forms, where you can manually start the spinner and stop it when the HTTP request completes.

timgavin commented

@theodorejb

I also tried the following instead of bind, which is intermittent; sometimes it will work, sometimes it won't.

$('form').submit(function (e) {
    var l = Ladda.create(document.querySelector('.ladda-button'));
    l.start();
});

This is quite frustrating, actually, because I'd like to give the user some feedback on a regular form, and because Ladda is working perfectly in Chrome on all forms - AJAX or otherwise.

theodorejb commented

I think the issue is that a regular form submission reloads the page, and there's no guarantee that JavaScript/CSS animations will run smoothly during the reload. Some browsers do it, and others don't. That's why I recommend only using Ladda with AJAX forms, where you can control when the spinner starts and stops.

Honestly, I think we should consider deprecating the bind function and removing it in the next major release given that there doesn't seem to be a way to ensure that it works as expected in all browsers.

timgavin commented

I'd like to have some kind of feedback when uploading images, videos, etc. that doesn't involve AJAX. Was hoping Ladda would be it. :(

  • 👍2
theodorejb commented

Doesn't the browser have some kind of built-in loading indicator when submitting a standard form?

timgavin commented

Yeah, but I don't think anybody who isn't technical really pays attention to that, do they?

terales commented

Totally agree with @timgavin.

Please, do not remove ability to use Ladda on buttons which triggers page reloads. Let's figure out a way to Safari and find a solution.

terales commented

Tested with saucelabs.com

Ladda script was evaluated and run successfully, but no frames were rendered between click and page reload.

test-results

I'll try to find a solution for this

  • 👍1
terales commented

I think I found a solution. It's hacky and dirty right now, but I need some confirmation from a real Safari experience.

Problem: Safari won't repaint anything during submit event or page reloading.

Solution is to force Safari to do redraw. There are several approached to do that:

What I've found is that we need to force spin.js to use timer based animation, so it would be possible for us to force redraw every tick. I think it's possible to do it in a cleaner and isolated way, but right now I need a proof of concept.

@timgavin can you check https://terales.github.io/Ladda/test/bootstrap.html, please?
Does form submit work for you?

timgavin commented

@terales The form submits but Ladda does not show. There's a 404 error in the console; could a required object be missing?

terales commented
terales commented

@timgavin could you update issue title to "Not working on Safari after form submit with page reload", please?

jloguercio commented

This issue still without a solution?

terales commented

Yes, the only solution is to do it by yourself:

  • intercept form submit event,
  • call event.preventDefault and wait for the animation,
  • call form's submit event.
salimbaig916 commented

In IPAD or iphone the web chat i have a submit button , but in safari the web browser in not working

terales commented

@salimbaig916 Yes, the only solution, for now, is to implement this behaviour by yourself:

  • intercept form's submit event,
  • call event.preventDefault and wait for the animation,
  • call form's submit event.
saschaheim commented

I have fixed this issue plus backed this library with an feature that implements feedback after the progress reached 100%.
I will made a pull request very soon.