Effects not working in safari

[miguelcobain]

@miguelcobain When I click a button, I see the background color change within a rounded rect and no animation.

@BryanHunt do you see any difference between http://miguelcobain.github.io/ember-paper/#/button and https://material.angularjs.org/#/demo/material.components.button ?

[altrim]

I think @BryanHunt is using Safari. On the latest safari I am checking the effects are not working on buttons and same for switches, checkboxes and radio buttons are broken.

[miguelcobain]

Ember-paper or angular material or both?

[altrim]

I am noticing just for ember-paper demo the issues. Angular material works fine on safari

[miguelcobain]

Ok, thanks.

Don't have my mac around right now. Will try to have a look when i do.

[BryanHunt]

Yep, I'm on a Mac using Safari :) Yep, effects seem to be broken. I see the effects on the Angular button but not the paper button. IMHO, the wave effect on the materialize site is better than the Angular one.

[miguelcobain]

Ok, thanks. Don't know what may be happening. 😕
Side note: the discussion should be which effect is closer to specs (I don't know that answer).

[BryanHunt]

Just to close out the side note. The Angular version seems to match the spec. I'm all for going with the spec.

[btecu]

Not just the effects but most of the things seem broken in Safari:

[BryanHunt]

I think the problem is more fundamental than effects. It looks like the CSS is very broken in general on Safari - there are no headers on the sample application at all. Looks great under Chrome.

[miguelcobain]

I could use some help in finding this bug. What kind of headers are missing?

[BryanHunt]

Here is a screenshot of what I get when I open http://miguelcobain.github.io/ember-paper/

[BryanHunt]

And here is the computed style for md-nav-container as an example.

[green-arrow]

@BryanHunt @miguelcobain looks like the root problem is Safari not understanding display: flex. By adding display: -webkit-flex, things start looking better. Looks like we need to just add in the -webkit prefix for flexbox layouts in order for this to work in Safari.

I think pulling in Autoprefixer and running that against our CSS would solve the issue nicely.

[miguelcobain]

What about this https://github.com/kimroen/ember-cli-autoprefixer ?
Our sass compilation is currently a "workaround", so it may not make sense to use this addon.

[green-arrow]

I'd have to read up on how to inject properties into EmberApp. I've never used an addon within an addon before 😛

For this pass I just wanted to follow the patten you were already using in postinstall.sh.

[miguelcobain]

Let's stick with this for now.
I'm hoping to have a better sass build approach when this is solved: ember-cli/ember-cli#2905

[green-arrow]

Sounds like a plan.

[BryanHunt]

AwesomeSauce!!