Not showing icon on Safari 9

[BorntraegerMarc]

I am submitting a

• Bug report
• New feature

Description
On safari 9 iPhone 6 icons are not shown at all (top right corner):

Safari 10 works like a charm.

delightful-icons version

0.1.1
Polymer version

2.0.0
Which browsers does this affect?

• Chrome
• Safari
• Firefox
• Edge
• IE11

[hotforfeature]

Looks like it's something to do with ShadyCSS custom properties. Safari is reading

animation-delay: var(--delightful-icons-duration);

as an invalid property, so the delay, timing function, and durations are never applied. If I set it to something like

animation-delay: 0.2s;
animation-delay: var(--delightful-icons-duration);

Then Safari 9 reads the first one while other browsers read the second one for CSS properties. I really don't want to add those hard-coded defaults everywhere though. I'll try to figure out why the SVG style elements aren't being processed correctly by ShadyCSS.

[hotforfeature]

There were a few potential solutions, but I decided to go with the least cumbersome workaround to get icons displaying on Safari 9.

Ultimately while Safari 9 can show the animations, the market share is so low compared to Safari 10 and 11 (4% at time of writing vs 79% for 10 and 17% for 11) that I think easier maintenance justifies the lack of animation support.

This means Safari 9 will behave like IE11 and Edge. It'll show the icons, but without an animation.

If you feel very passionate about Safari 9 utilizing animations, I would ask for a proposed solution that is easy to maintain and does not inflate the size of the icon sets too much.

[hotforfeature]

For record keeping and in case anyone wants to try their hand at fixing it, here are the solutions I found.

Duplicate CSS properties

Do something like

animation-delay: 0.2s;
animation-delay: var(--delightful-icons-duration);

Safari 9 won't evaluate the second line since it doesn't support CSS properties, but it'll use the first "default" value. Other browsers will use the second line and the property instead.

We'd need to duplicate 6 properties per icon set, and deal with maintaining those properties if the CSS properties ever change. Additionally, this would kill any built-in solution for #2. The user would also be unable to choose to disable animations by setting the delay property to 0s.

Wrap with <custom-style>

<custom-style>
  <style type="text/css">
    .mabab path {
      animation-name: mabab-v;
      animation-delay: var(--delightful-icons-duration);
      animation-fill-mode: forwards;
      visibility: hidden;
    }
  </style>
</custom-style>

This makes CSS properties work, but ShadyCSS applies the wrong scope class to the SVG elements. The effect is that the icons immediately transition without an animation since the animations don't apply to the line parts.

This could be a good fix, but I could not figure out a way to prevent ShadyCSS from adding :not(.style-scope) to the styles defined in this <style> tag. If that problem can be solved, I'd be highly motivated to use this solution since it feels pretty solid.

Since the end effect was "animations don't work but the icons do", I went with the following solution that has the same effect but with a slightly smaller footprint.

Force visibility

We can force visibility of the default path element by changing the CSS to use a custom property, which Safari will ignore.

visibility: var(--hidden, hidden);

This is not evaluated on Safari 9, which means the path defaults to visible. On other browsers, the --hidden property is not defined, so it uses the default value of hidden.

Maintenance-wise, this is the easiest with the smallest footprint. It may not be the best solution though, it could break if the user defines a --hidden CSS custom property that does not equal hidden.