Strange behavior - progress bar jumps after animating

[danxshap]

First, thanks a lot for this directive!

Second, have you ever seen this happen? http://d.pr/v/Nnb9

This is for 50% progress.

Any ideas on how to fix would be greatly appreciated!

[stakach]

Weird - it looks like it gets past 50% (as the clipping changes) Does it only happen in firefox? What build tools are you using? Grunt? Is it a yeoman project?

[danxshap]

Not using any build tools like Grunt. Not a yeoman project.

The video is actually from Chrome (latest version on OS X Mavericks) but the same thing happens in Firefox.

I should have mentioned this initially: I turned orbicular.scss into a partial (_orbicular.scss) and am @import'ing it into my project's main Sass file with all of my other styles. Also, I don't have compass, but I have border-radius and transform mixins defined in my own Sass "utils" partial.

They look like this:

@mixin border-radius($radius) {
    border-radius:$radius;
    -webkit-border-radius:$radius;
    -moz-border-radius:$radius;
}

@mixin transform($transform) {
    -webkit-transform: $transform;
    -moz-transform: $transform;
    -ms-transform: $transform;
    transform: $transform;
}

Also, this is what it looks like for 33%: http://d.pr/v/NPDl

It looks shifted, right? Shouldn't it start at the top/12 o'clock exactly?

[stakach]

I might actually update the project to use a partial as it does seem like the logical way to do things. Happy to move away from using compass mixins too with namespaced mixins, If you want to create a pull request otherwise I'll create a new release next week as I am sort on time this week.

Otherwise it looks like a CSS issue - maybe inspect the elements to show the CSS as applied to the element. There might be a class clash? It does look off centre

[danxshap]

Ah, after further investigation, looks like this is the problem: https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css#L881-L891

Fixed if reset that property back to content-box within the main div like this:

// this is the core progress class
div.co-circle-progress {
    position: relative;
    width: 100%;
    height: 1em;

    *, *:after, *:before {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
    }

etc...

I'd be happy to wrap those up in a mixin & also include the border-radius & transform mixins and send a PR.

What exactly did you mean by "namespaced mixins" though? Should I create a partial "_orbicular_utils.scss" or something and then have mixins like "orbicular-border-radius", "orbicular-box-sizing", and "orbicular-transform"?

[stakach]

Thanks! With the namespacing I mean create the mixins as: @mixin co-border-radius so it doesn't clash with compass