hakimel
Not working on Safari after form submit with page reload
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();
});
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?
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.
@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.
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.
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. :(
Doesn't the browser have some kind of built-in loading indicator when submitting a standard form?
Yeah, but I don't think anybody who isn't technical really pays attention to that, do they?
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.
Tested with saucelabs.com
Ladda script was evaluated and run successfully, but no frames were rendered between click and page reload.
I'll try to find a solution for this
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:
- https://stackoverflow.com/questions/3485365/how-can-i-force-webkit-to-redraw-repaint-to-propagate-style-changes
- https://stackoverflow.com/questions/8840580/force-dom-redraw-refresh-on-chrome-mac
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?
@terales The form submits but Ladda does not show. There's a 404 error in the console; could a required object be missing?
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 [email protected] 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 .
@timgavin could you update issue title to "Not working on Safari after form submit with page reload", please?
Yes, the only solution is to do it by yourself:
- intercept form
submitevent, - call
event.preventDefaultand wait for the animation, - call form's
submitevent.
In IPAD or iphone the web chat i have a submit button , but in safari the web browser in not working
@salimbaig916 Yes, the only solution, for now, is to implement this behaviour by yourself:
- intercept form's
submitevent, - call
event.preventDefaultand wait for the animation, - call form's
submitevent.
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.
