947844 - Animate a Poem doesn't animate in Chrome

Status: RESOLVED INCOMPLETE

(Webmaker Graveyard :: General, defect)

Description

[Laura Hilliger [:epilepticrabbit]]

we're promoting NWP's project built at Mozfest for hour of code. I just got DM'd that it doesn't animate in Chrome. 

I tried adding -webkit to CSS animations (shouldn't have to, didn't work anyway). Can someone take a look? I can update the Thimble...

Comment 1

[William Duyck [:fuzzyfox]]

Can you ping the link over and I'll take a nose.

Comment 2

[William Duyck [:fuzzyfox]]

nvm... make found, and problem identified.

Chrome does not support `Array.filter();` Refactoring the code to work more cross browser.

Make: https://thimble.webmaker.org/project/26846/remix
Pre-refactor: https://rawgithub.com/fuzzyfox/fuzzyfox.makes.org/0f8fa1f9086cd2a696e398f425dd774750239fa2/animated-poem.html
Problem code: line 160.

Comment 3

[William Duyck [:fuzzyfox]]

I've changed up the JS a little to convert the NodeList into an Array, and then used a `forEach` to iterate through the elements when attaching listeners instead of `filter`.

This means that the CSS animations are now being triggered, however in Chrome it appears that some prefixing will need to be done for all the animations to work :/

JS Fix: https://rawgithub.com/fuzzyfox/fuzzyfox.makes.org/c3efea99cf314d627c7daa0e6807f303f16cf711/animated-poem.html

Comment 4

[William Duyck [:fuzzyfox]]

One way to solve the need for vendor prefixes is to use a script like prefixfree.js <http://leaverou.github.io/prefixfree/>. This will automagically add the vendor prefixes to the css when needed, rather than having to worry about it ourselves OR mean we have to add this to the conversation with the learner, when it might not be the right time to / make sense.

Here's a fully working version of the project using prefixfree.js with the js modifications from comment #3.

Working version demo: https://rawgithub.com/fuzzyfox/fuzzyfox.makes.org/58a55681d2fa1caf5c81e68ac631daf85592ca57/animated-poem.html
Working version code: https://raw.github.com/fuzzyfox/fuzzyfox.makes.org/58a55681d2fa1caf5c81e68ac631daf85592ca57/animated-poem.html

Comment 5

[Pomax]

This not a matter of Array.filter() not working in Chrome, but simply "that is not how filter works". The filter function runs on actual array objects, not on the Array object type, so the original make simply has JS that shouldn't work in any browser.

Everything like this:

Array.filter(animatedElements, function(element) {
  element.addEventListener('click', function() {
    // Toggle the class "start" on the clicked element
    this.classList.toggle('start');
  });
});

Should just be:

animatedElements = animatedElements.filter(function(element) {
  element.addEventListener('click', function() {
    // Toggle the class "start" on the clicked element
    this.classList.toggle('start');
  });
});

instead, if animatedElements is an array. Otherwise, if it's a NodeList (or HTMLCollection, or other arrayesque object):

animatedElements = Array.prototype.filter.call(animatedElements, function(element) {
  element.addEventListener('click', function() {
    // Toggle the class "start" on the clicked element
    this.classList.toggle('start');
  });
});

And now it's an array, with the filter applied.

Additionally, thimble does not currently support the @keyframes CSS block (see bug #899097) so this will get flagged as erroneous code. You can publish it "with errors" and it will work when you load the make in the browser, but it will probably not preview correctly, and will definitely claim the CSS has errors.

With that knowledge, the JS needs some rewriting, but the make will still not properly load until keyframes are fixed, so this make may need additional code to compensate for keyframes not being available (like including jQuery's and using its animate() function instead).

Comment 6

[Chris DeCairos (:cade)]

Closing this bug as part of the Deprecation of the Webmaker Product on Bugzilla. If this issue needs to re resolved in another manner, re-file it in a new Product or find the associated project on Github (http://github.com/mozilla) and file an issue there.

see bug 1347718