search

cotag / orbicular

A CSS based circular progress bar for AngularJS
MIT License
47 stars 15 forks source link

Remove dependency on CSS clip property #26

Closed godfrzero closed 9 years ago

godfrzero commented 9 years ago

This property is now deprecated as mentioned on MDN:

https://developer.mozilla.org/en-US/docs/Web/CSS/clip

Consider using clip-path instead if possible. It's not completely supported across major browsers yet, but partial support seems good enough.

stakach commented 9 years ago

I think we'll have to use both in parallel for 100% coverage. I can't seem to make it work - do you want to have a crack at it?

stakach commented 9 years ago

Closing this as browser support is not quite ready. I pushed placeholder code here: f0ec623a6c5c39831a1262aca7447fbdd0005919 (feel free to try it out)

The partial support is a bit misleading, firefox doesn't support shapes and both chrome and safari have rendering issues in their current releases.

It is also quite unlikely that any browser will drop support for clip in the medium to long term. So I think until this becomes an issue we leave the implementation as it is.

godfrzero commented 9 years ago

Cool (Y) I'll be messing around with this later, so I'll send a PR in case something works out.

stakach commented 9 years ago

Sounds good.

I tried using mask-image too, with much better results, however still not ideal. I would prefer inline images and the svg base64 I ended up with was pretty big, then to add insult to injury, it needs to be entered twice. Once for the prefixed version and once for the standard.

The code is also in the repo with the SVG files and an alternative CSS file is in the demo folder.