search

lemonmade / bigfoot

A jQuery plugin for creating exceptional footnotes.
http://www.bigfootjs.com
MIT License
934 stars 77 forks source link

Unprefixed CSS transform causing Safari animation problem? #37

Open dliggat opened 9 years ago

dliggat commented 9 years ago

Hi @lemonmade - I've noticed with 2.1.2 the popover animation behaves somewhat jankily in Safari, but not Chrome.

Is this possibly down to the fact that the transforms in the CSS are no longer prefixed? It seems Safari still requires a -webkit prefix: http://caniuse.com/#search=transform

dliggat commented 9 years ago

FYI - I've sidestepped this issue (and presumably a whole other class of similar problems) by setting up autoprefixer, and running my site's CSS through that as a build step.

lemonmade commented 9 years ago

Weird, I have autoprefixer set up (https://github.com/lemonmade/bigfoot/blob/master/Gruntfile.coffee#L65) — I must have messed up the build step at some point. Thanks for pointing this out, will resolve this weekend.

dliggat commented 9 years ago

Great stuff; thanks!

lemonmade commented 9 years ago

Just took another look, all of the CSS files still seem to have -webkit- prefixes, as do the versions downloaded from www.bigfootjs.com. autoprefixer seems to be running as it should. Can you confirm where you downloaded the version you have from/ which stylesheet specifically you are dealing with?

dliggat commented 9 years ago

I think I know what the issue was. The version I'm currently using is ~2.1.2, which is what resolves from a bower install. It contains no CSS, only SCSS, so I assume the intent is that any client of the bower version should be autoprefixer-ing on their own end.

e.g. "/src/scss/base/bigfoot-popover.scss" has unprefixed transforms starting on line 67, and in the absence of an autoprefixer step, these seem to be to blame for the Safari issue. Maybe there's a case for adding the CSS variants to the bower package, but other than that, it seems nothing is in fact to blame for this on your end. Sorry for any confusion!

VioletPixel commented 9 years ago

This is an issue when using bigfoot-default.scss with a Jekyll install as well. Adding the prefixed variants of the transform lines fixed it.

lemonmade commented 9 years ago

@Xuff There are Autoprefixer plugins that work with Jekyll, I strongly recommend using those to prevent hard-coding potentially unnecessary vendor prefixes (more work for you, more bloat for your stylesheet).