Logo interactions don't work in some browsers

[bryanbraun]

Background:

The logo at the top of my website is an SVG and on each page load a randomly-selected script is run, applying a fun animated interaction to it (see more details here). Unfortunately most of these animations don't work in Firefox or IE. This isn't too serious because the fallback is a static image but it's still annoying.

The issues:

In Firefox:
The gradient interaction happens on logo hover, but the rest of the interactions don't take effect. I've confirmed that this is true regardless of which script is loaded.

In IE:
None of the interactions work except for the color changing on click (and even then, it's a solid color instead of the expected gradients).

The cause:

After some research, these issues are due to using the CSS transform and transition properties to animate elements. Firefox and IE browsers don't really support using these CSS attributes.

Possible solutions:

To fix these issues, we'd might be able to:

• Rewrite the animations to use element.setAttributes('transform', 'translate(100, 100)'); OR
• Somehow use CSS Keyframe animations (maybe add/remove a class on hover)? OR
• Rapidly change the translate values using something like requestAnimationFrame.

Tip: If you work on this, you can do development using the /logo-dev url. Also, you can speed up development a lot by using incremental builds (jekyll serve --incremental).

[bryanbraun]

Update: I fixed some of the inconsistency between logo animations on the /logo-dev in 98a8b2b.

When I tested the animations on Firefox it actually looked like they were taking effect now (perhaps due to some browser updates). However, the animations still looked a little different than they do in chrome. I'm going to leave this issue open for addressing these issues.

Here's some details on one situation we can look into:

1. The rotation origin for logo-script-8 is in the wrong location on Firefox. Why?
   • It works fine for this demo: https://codepen.io/giaco/pen/OwowJQ
   • I think the problem is that transform-box isn’t working for elements inside of a clip-path (in firefox)
     • When I take the letters out of the clip-path, the letters rotate fine.
     • A simple example, posted to stack overflow, seems like a good next step. I searched but couldn’t find this example.
2. The hovering on logo-script-10 is a bit janky in Firefox. Why?
   • Firefox doesn't seem to support pointer-events: bounding-box (see more here). Workarounds exist but seem pretty janky. Given that this property is part of the SVG 2.0 spec, it may be best to just wait until Firefox adds support (which worked for Safari).