Code, doesn't behave as it's supposed to. -moz-
Hello,
I'am making a website but unfortunately it doesn't quite work the way I want it to.. I'am currently testing in the following browsers: Chrome, Firefox and Safari... CSS animating is the last thing I can use for my website, as alternatives would be too resource-heavy to put on a server and run smoothly.
My issue is that:
$imgtoplay = $(".gwd-gen-hlergwdanimation");
$imgtoplay.on('webkitAnimationStart oanimationstart msAnimationStart animationstart', function() {
setTimeout(function(){
$imgtoplay.css({'-webkit-animation-play-state': 'paused','-moz-animation-play-state': 'paused', 'animation-play-state':'paused'});
},300);
});
doesn't work, the animation just plays.. it never stops after 300ms, does anyone know what's wrong?
Modified by cor-el
Chosen solution
Any thoughts as to why your animation might be starting in Firefox before the event handler is added? How do you start the animation?
Read this answer in context 👍 0All Replies (18)
If that code is running, you would expect to see some CSS warnings for the unrecognized properties in the Browser Console (Ctrl+Shift+j). If those don't show up, can you tell whether the initial event is firing in Firefox? You could test with anything visible, like changing the background color of the page.
The event fires, and in my editor it doesn't show that the -moz- property is not recognized, in fact it doesn't say anything that could lead me to believe that the property is unrecognized, nothing is said in the console log either
Firefox no longer uses that -moz property and instead uses the standard property that you have immediately following it. (See: https://developer.mozilla.org/docs/We.../animation-play-state) So the log normally would show that Firefox is ignoring both the -webkit and -moz properties.
If you use Firefox's Inspector (right-click the target element > Inspect Element (Q)), can you confirm that the inline style been added to the element by the jQuery .css() call?
Yes the style has been added by the JQuery.css() Call, I just noticed, that if you mouseover, it adds the style.. then it stops, as it is supposed to, but it doesn't act the same as in google chrome (as it's supposed to) it only runs & then stops if i hover on it with my mouse, picture: http://gyazo.com/1d2f2ca54ae374987b25341e85a45c29
So the .on() function is successfully adds an event handler to the image, causing Firefox to add the style when animation starts causing it to stop as intended.
But in your test Firefox only starts the animation on mouseover while Chrome starts it earlier. So the problem is earlier in the process or elsewhere in the code.
What is the intended trigger to start the animation?
It might be helpful to provide a link to a sample page demonstrating the problem, either on your server or perhaps on jsFiddle.
The trigger to start the function is on document.ready
document.ready, I guess that's a jQuery thing.
So from your original post, the animation does start in Firefox at that point and doesn't stop.
So it seems there is a problem with the animationstart event not firing in Firefox, or the event handler not being attached to the element at that point. Are you able to distinguish between those two possible issues?
document.ready indeed is a Jquery thing, you write your code in it so that it may only fire, once the page is ready & loaded.
The animationstart does fire, but the animationpause doesn't, as it does run, but never stops, neither is it attached unless you mouse over it, so i believe it's a combination of the two issues you've mentioned above
Are there any errors in the Web Console (Firefox/Tools > Web Developer)?
- about:config page: javascript.options.strict
Hello Sir,
There are no errors in the console of Firefox
There are many opportunities for timing issues that are hard to evaluate in a forum discussion without a (non)working test case. If you can post a page that replicates the problem, please provide a link.
unfortunately I can not, my apologies
Chosen Solution
Any thoughts as to why your animation might be starting in Firefox before the event handler is added? How do you start the animation?
The trigger which starts the animation is document.ready, I believe it may not stop because firefox either: doesn't recognize it or implements the function in an incorrect way, I have not yet found a solution for this either.
I'm guessing that the animation is starting, and the animationstart event firing, before your event handler is attached. But without a demo to test, that is just a guess.
I have sent you a private message, with the link for the test page if you would like to take a look, then I would greatly appreciate it, thank you in advance
Since I can't private message images, here is what I see in both Firefox and Chrome (current versions, as customized).
I think you need to remove this style attribute so that you can set your event handlers before Firefox executes this CSS:
<img ... style="animation-play-state: running" ...
I've applied the changes, but for me it still plays without stopping in firefox, and acts as it should in Chrome, I'll upload the file