Firefox fix / hack

[xem]

I spent the last 4 days to come up with a solution for Firefox (keeping 25 cubes below 100 polygons), the idea is to show only 3 faces to each cube, and give 3 more faces to the one(s) that rotate at a given moment.
It's hacky and dirty and adds a ton of code, but it kinda works. :)
FYI:
http://codepen.io/xem/pen/vyXejE
http://codepen.io/xem/pen/JbbGPR
(it's a WIP)

[crnacura]

That's a really interesting solution and although it does add lots of code, I believe that it will be very useful for many devs who are facing that problem. I'm going to link to your pens from the article if that's alright with you :) Let's leave this issue open, so that the ones seeking for a solution will find it easily.

[xem]

@crnacura Sure, thanks I think I also found a way to keep all faces and still look less broken on Fx:
You need to add the cubes of each line from left to center, then from right to center (like: 1 2 3 4 7 6 5)
By doing so, you'll force a little the Z-ordering on Fx even if you have more than 100 polygons (like in your demo).
Cheers!

[ugintl]

I found this issue link on codrops article https://tympanus.net/codrops/2016/11/09/cubes-advent-calendar/

In demo 3 in "Cubes Advent Calendar", when you hover over a cube, the background changes. I am trying to replace this effect with an image. When you hover a cube, it should show background image. I have searched a lot and I have also tried myself by making changes, but it did not work. I am not good with javascript.

Do you know how to do it?

[xem]

for each cube, attach a hover listener in JS that looks like this:

cube1.onmouseover = function(){ document.body.style.background = "url('...)" }
// cube2.onmouseover = ...
// etc. Use a different url(...) for each cube if you want

[ugintl]

But it will change the background image of the whole body. What if I the cubes are in a particular section?

[xem]

then change the background image of the section. Instead of document.body, use the section's id

[ugintl]

so the code will become document.getElementbyId('id').style.background = "url('...)" correct?

[xem]

if the section has "id=toto" it'll be:
document.getElementbyId('toto').style.background = "url('...')"