Vertical Alignment Broken in Safari?

[ladygeekgeek]

Hi there - can't seem to get align() to work in safari - is this a known bug? Have a look at this codepen on safari versus chrome.
http://codepen.io/SitePoint/pen/ogWpyd

Thanks

[martinsmith]

BUMP - Coincidentally just stumbled on this problem myself :/

[jakecleary]

Hi @ladygeekgeek, @martinsmith,

This seems to be because your CSS isn't being prefixed. If you look at this page you'll see that Safari requires the -webkit- prefix to understand 2D transforms.

I would recommend using something like autoprefixer for this. It will autoprefix your CSS based on browser support that you can specify.

Are you using Grunt/Gulp or anything like that? It will make it easy to integrate an autoprefixer into your workflow.

[samccone]

👍 good call @jakecleary

I will close for now, unless we isolate to jeet

[ladygeekgeek]

Thanks Jake - but that's just calling the Jeet mixin - so maybe they need to fix their code to include the safari prefix? The codepen is just an example of how to use Jeet (it's not my code).

[ladygeekgeek]

I'm importing Jeet via codekit.

[microcipcip]

Do you have autoprefixer enabled on Codekit then?

[ladygeekgeek]

Hmm - I use compass - so assumed that sorts my own prefixes.

[microcipcip]

AFAIK Compass will add the prefixes just for specific compass functions, Jeet is not a Compass extension so I guess it won't have prefixes added there.

[jakecleary]

Hi @ladygeekgeek,

In codepen if you click on the CSS option cog you can enable autoprefixer. This will fix it for you 😄

[martinsmith]

Hi there! Thanks for looking into this - apologies for not even considering Autoprefix :( I can confirm this fixes the issue. @ladygeekgeek, in Codekit select your .scss (or styl, or sass) file and a side panel will appear. Click the Autoprefixer checkbox, recompile and bobs your uncle!

[ladygeekgeek]

Thanks everyone for your help - I'll switch on autoprefixer - but perhaps this should be mentioned somewhere in the Jeet documentation.

[samccone]

@ladygeekgeek thanks for the feedback! I have opened a PR to do just that!