CODEWITHSUNDEEP
javascriptjquerycss
halliewuud
halliewuud

Reputation: 2785

border-radius + overflow:hidden when animating with jQuery

Check this jsFiddle.

The orange bar is serving as a progress bar where the value under the circle is how high the progress bar should be.

Any idea why the overflow:hidden; is beeing disregarded and how do one solve this problem? Oblviously nothing should go outside the circle.

Also is there a better solution for this?

Upvotes: 8

Views: 530

Answers (7)

K K
K K

Reputation: 18099

Modified your fiddle a little bit. Here is the link

Modifications: Changed .outerContainer css to display:block from display:table and addedmargin-top:30px to p css

Check if this works for you.

Upvotes: 1

Andrea Ligios
Andrea Ligios

Reputation: 50281

display: table doesn't work that good with CSS positioning;

you should avoid using that, and find some other way to vertically center your labels.

If your circles have a known height, like your code seems to indicate (height:96px ecc), then just use a fixed top position for an absolutely positioned <p> element:

http://jsfiddle.net/ZyhgT/5/

Note that you don't even need jQuery for this, it is all achievable with just CSS3 (unless you are targeting old browsers)

Upvotes: 0

Jhalak Subedi
Jhalak Subedi

Reputation: 1

Put the level class inside the outerContainer div and style the span inside the level class to be relatively positioned. In the JavaScript, to calculate the level, divide by 10 instead of 100 for the perfect circular hover effect.

Here is a fiddle.

HTML

<div class="outerContainer">
    <div class="innerContainer">
        <p>Circle 3</p>
        <span class="progressBar"></span>
    </div>
    <div class="level"><span>75</span>
    </div>
</div>

CSS

body {
    background: blue;
}

#circles {
    text-align: center;
    margin: 100px 0;
}

li {
    display: inline-block;
    margin: 0 10px;
    position: relative;
}

.outerContainer {
    position: relative;
    display: block;
    height: 96px;
    width: 96px;
    overflow: hidden;
    background: #fff;
    border: 2px solid #fff;

    -webkit-border-radius: 50px;
    border-radius: 50px;
}

.innerContainer {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

p {
    color: #000;
    width: 96px;
    position: relative;
    z-index: 2;
}

.progressBar {
    display: block;
    width: 100%;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #ec6730;
}

.level span{
    position:relative;
}

JS

$(function() {
    $("#circles li").hover(function(){
        var thisElement = $(this);
        var level = $(this).find(".level").text();
        var elementHeight = $(this).find(".outerContainer").height();       
        level = (level/10)*elementHeight;

        $(thisElement).find(".progressBar").stop().animate({
            height: level
        }, 300);
    }, function() {
        var thisElement = $(this);

        $(".progressBar").stop().animate({
            height: 0
        }, 300);
    });
});

Upvotes: 0

user547202
user547202

Reputation:

You just need to change your .outerContainer class and it works just fine!

.outerContainer {
    position: relative;
    display: block;
    height: 96px;
    width: 96px;
    overflow: hidden;
    background: #fff;
    border: 2px solid #fff;

  -webkit-border-radius: 50px;
          border-radius: 50px;
}

Upvotes: 0

Hugo Silva
Hugo Silva

Reputation: 6958

This is not related to jQuery or any javascript. In fact, if you delete all your javascript and manipulate the height of your .progressBar using css on li:hover, you will notice the bug anyway.

It appears to be a browser issue as reported on: https://code.google.com/p/chromium/issues/detail?id=157218

As a workaround try adding an imperceptible css transform to the mask element:

.outerContainer {
    -webkit-transform: rotate(0.000001deg);
}

Upvotes: 0

Keo Strife
Keo Strife

Reputation: 1446

I think it's the browser thing...

This is the CSS3 version...

.progressBar {
    display: block;
    width: 100%;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #ec6730;
    transition: height 1s;
}

.innerContainer:hover > .progressBar {
    height: 300px;
}

http://jsfiddle.net/ZyhgT/2/

It no longer flashing 'cause browser handle the job (not js loop animation...). But still it shows the edge on animation finish!!! This could be the browser things... Could be a bug...

Upvotes: 0

user1618143
user1618143

Reputation: 1748

position: absolute and overflow: hidden don't appear to be playing nicely with display: table/table-cell. Removing the table stuff you had in there to vertically center the text fixes the problem. In Firefox, at least.

Upvotes: 0

Related Questions