google / google/material-design-lite

Safari accent button color wrong

Open
#4,401 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
HTML
Stars
32.2k
Forks
4.9k
PR merge metrics
No merged PRs in 30d

Description

I'm writing an application that uses MDL and have reached the point where I am trying to get cross browser support. I've noticed that buttons with class `mdl-button--accent` and an icon inside have a strange effect on the color in Safari.

This is my version of safari :
![version](https://cloud.githubusercontent.com/assets/11824310/15786590/6dcc0b14-298b-11e6-857a-73890e8d02b2.png)

This is what it looks like in the application:
![screen shot 2016-06-03 at 12 11 47 pm](https://cloud.githubusercontent.com/assets/11824310/15786605/873962ae-298b-11e6-8e75-92813af3aa2a.png)

I'm using the default MDL color scheme here and the buttons should all be pink (accent color).

here is a codepen where you can try it [http://codepen.io/kriddy800/pen/ZbmJjo](http://codepen.io/kriddy800/pen/ZbmJjo)

and in this zip is a video showing how to reproduce the issue on the code pen
[Record.zip](https://github.com/google/material-design-lite/files/298064/Record.zip)

You'll notice after clicking off the highlight that the button flickers a blue color.

Any input would be appreciated, thanks

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.