Checkbox icon hidden in Safari

[amsheehan]

What MDC-Web Version are you using?

0.3.0

What browser(s) is this bug affecting?

Desktop Safari

What OS are you using?

macOS 10.12.2

What are the steps to reproduce the bug?

1. run the demo server
2. go to http://material-components-web.appspot.com/checkbox.html in Safari
3. click once to select checkbox, click again to deselect
4. subsequent clicks will show a filled in checkbox with no icon

What is the expected behavior?

check or indeterminate icons will be displayed

What is the actual behavior?

checkbox fills in with primary color, no icon is displayed

[traviskaufman]

This is happening for our JS checkbox, but not for our regular checkboxes. Looks like it could be a regression of some sort, but definitely a bug. We should prioritize this.

[traviskaufman]

spent time on this today. It's proving extremely difficult to debug animations in Safari.

Looking at the inspector, everything basically looks correct. The styles inspector shows the styles which should be applied, but are not. Manually toggling and un-toggling the styles causes the element to look correct again 🤦‍♂️ 🤦‍♀️ 🌎 💥

The first thing I noticed is that in our adapter, we're not attaching the correct animation events for getCorrectEventName; we're passing animation as the arg rather than animationend. I fixed this (#220), but unfortunately it did not solve the problem.

I tried following the advice in this stackoverflow post regarding enabling Safari's internal debug menu. I did that and played around with it and couldn't seem to identify any of the issues.

I will keep experimenting to see if I can find some way of figuring out why this isn't working, but unfortunately it does look like a browser issue. Checkboxes work fine in every other browser. I see three immediate options:

1. Try toggling certain style properties back and forth within our animation end handler to see if we can force safari into applying the proper styles.
2. Feature-detecting Safari - yet again - and disabling enhanced animations when detected.
3. Change the transition UX of the checkbox to be more Safari-friendly

All of these are suboptimal, but there's no way around dealing with browser inconsistencies.

[traviskaufman]

Doesn't work in Mobile Safari either. Will try and git bisect to see if there was a change that broke it. Otherwise, it may have been an OS update that caused the breakage, in which case we're in trouble...we can try creating a simple repro of the issue and file a bug with webkit.

[traviskaufman]

Other option could be to use an mdc-checkbox-upgraded class, remove all default styling from checkboxes, and use a forwards animation-fill-mode property.