Not working on Safari after form submit with page reload

timgavin commented 6 years ago

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 6 years ago

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 6 years ago

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 6 years ago

@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 6 years ago

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 6 years ago

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. :(

theodorejb commented 6 years ago

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

timgavin commented 6 years ago

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

terales commented 6 years ago

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 6 years ago

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

terales commented 6 years ago

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 6 years ago

@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 6 years ago

No, this error is for Twitter stuff.

I have no idea what could we try next. Maybe you can try intersept submit event, start Ladda and submit form after 1 ms or so?

On Fri, Dec 15, 2017, 1:51 AM tim gavin notifications@github.com wrote:

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

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/hakimel/Ladda/issues/71#issuecomment-351871586, or mute the thread https://github.com/notifications/unsubscribe-auth/AB1Of2sv6cUvmck0Y-b6Ke4MJBClL1azks5tAbSRgaJpZM4QXUu8 .

terales commented 6 years ago

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

jloguercio commented 5 years ago

This issue still without a solution?

terales commented 5 years ago

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 5 years ago

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

terales commented 5 years ago

@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.

ThinkBIG-Company commented 4 years ago

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.

hakimel / Ladda

Not working on Safari after form submit with page reload #71