Css Keyframe animation on click is added and removed only once

[damcel]

This seems to be a CSS issue, not so much a JS problem.

I have added all the JS fixes I could find online, there are no JS errors thrown in any console, and what is worst, this stuff ran in IE10 and 11 before I made the animations very simple.

The idea is simple to make the divs fly in when clicking the LI and to make them fly out when clicking the home button.

It works exactly as intended on desktop, but not on the mobile chrome and stock android browser, the last 2 will not animate the fly in more than once.

This works on FF, Chrome, should work in IE(it did before, canot test until tomorow).

Try this on an Android mobile, click on a list item, the corresponding ding will fly into position and fly out, but each div will do this only once.

The code is all inlined, it’s a small site, the keyframes css is from roughly line 100-450, the JS is at the bottom.

I have added the following “hacks”:
– all keyframes start from 0%(or “from”) and end at the 100% value, this is apparently a must do
– the adding classes in JS happens with a tme out and sets the offset, to trigger a reflow inbeteen.

IT worked slightly better before, even with 3d options in the keyframes, I simply cannot find a solution to this.

Website is live

http://www.jacks-barber.co.uk3

Thank you guys

[amanda_]

Do you have a codepen example? I can’t see the code. It could be an issue with using click function

$(element).click(function(){
// do something //
});

versus using on click

$(parent ).on( "click", element, function() {
 // do something //
});

because click function doesn’t work with dynamically added elements.

I find I have less issues if I create an if statement for click functions. But make a codepen demo, it will help.

[damcel]

@ amanda_

Hi Amanda, thanks, first off, sorry the original link was off, the site is live at:
http://www.jacks-barber.co.uk

The code is rather huge, I have put up a codepen, but keep in mind, this works on codepen etc, it specifically does not work on the android phones with the stock browsers, and currently not even on chrome mobile. (and for some reason, not in ie10 and ie11, my previous solution did work even on window os mobiles, but not at all in the stock android browser.).

http://codepen.io/damianocel/pen/NrpXLK

Here is the pen, the css and JS are large, let me explain the js first step by step, I have loaded the version 1 jquery version, as this made some stuff work on old android browsers.
– The commented out first function, I have tried to load Jquery on document load(fail, but doesnt matter, if someone knows how to do it, let me know lol)
– function”lazy” deffers loads images, gets very good loading speed despite many pics. This works in all browsers.
– the next to functions(jQuery), animate the header and the main menu on click, this works cross browser, all good.
-Now in the source code, from line 2031, that is the fly in fly out functionality, as you see, I have done this in vanilla js(I prefer vanilla, despite the many headaches), this or the css keyframes is where something goes wrong, again, it works on codepen, chrome, firefox desktop view as intended, to reproduce the error, one has to use the stock android or chrome browser on an android mobile.

The codependoes not have the pics, the live page has everything, the menu trigger on the codepen is the violet line, you have to drag open the menu on codepen to see the page somewhat.

Keep in mind i will rewrite the function in Jquery now and try a different jquery version as well(trying some stuff, so the live page might not work properly for random minutes, as i am adding the changes straight to the server.

As of now, it looks like i will have to load a specific android mobile css after user agent sniffing, this is something I am trying to avoid.

Thank you

[Author]

Posts