Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Lolu chungechunge lwabekwa kunqolobane. Uyacelwa ubuze umbuzo omusha uma udinga usizo.

Code, doesn't behave as it's supposed to. -moz-

  • 18 uphendule
  • 2 zinale nkinga
  • 20 views
  • Igcine ukuphendulwa ngu Gerwinvr

more options

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?

Okulungisiwe ngu cor-el

Isisombululo esikhethiwe

Any thoughts as to why your animation might be starting in Firefox before the event handler is added? How do you start the animation?

Funda le mpendulo ngokuhambisana nalesi sihloko 👍 0

All Replies (18)

more options

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.

more options

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

more options

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?

more options

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

more options

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.

more options

The trigger to start the function is on document.ready

more options

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?

more options

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

more options

Are there any errors in the Web Console (Firefox/Tools > Web Developer)?

  • about:config page: javascript.options.strict
more options

Hello Sir,

There are no errors in the console of Firefox

more options

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.

more options

unfortunately I can not, my apologies

more options

Isisombululo Esikhethiwe

Any thoughts as to why your animation might be starting in Firefox before the event handler is added? How do you start the animation?

more options

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.

more options

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.

more options

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

more options

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" ...
more options

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