CODEWITHSUNDEEP
javascriptjquerycss
stwhite
stwhite

Reputation: 3275

Border Radius changes when setting CSS width using Jquery

The problem I'm having is that the border-radius of a <div/> gets removed when applying the css width property via jQuery. The <div/> that has the radius is also cropping off an absolute positioned <div/>. I've included an example below:

http://jsfiddle.net/SLvBZ/2/

Here is a similar example where it works for Twitter (log in first): https://twitter.com/welcome/recommendations

Browser version: Chrome 26.0.1410.65

#SuggestProgressContainer {
    height: 27px;
    float: left;
    margin: 4px 20px 0 0;
    position: relative; top: 0; left: 0;
    width: 247px;
    overflow: hidden;

    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

#SuggestProgressBar {
    width: 247px;
    height: 27px;
    background: #c6c6c6;
    border: 1px solid #bfbfbf;
    position: absolute; top: 0; left: 0;
}

#SuggestProgress {
    height: 100%;
    width: 50px;
    position: absolute; top: 0; left: 0;
    border: 1px solid #068CE1;
    background: #0F93E7;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1c9dee), to(#068ce1));
    background: -webkit-linear-gradient(top, #1c9dee, #068ce1);
    background: -moz-linear-gradient(top, #1c9dee, #068ce1);
    background: -ms-linear-gradient(top, #1c9dee, #068ce1);
    background: -o-linear-gradient(top, #1c9dee, #068ce1);

    -webkit-transition: width 230ms ease-out;
       -moz-transition: width 230ms ease-out;
        -ms-transition: width 230ms ease-out;
         -o-transition: width 230ms ease-out;
            transition: width 230ms ease-out;
}

#ProgressText {
    position: absolute;
    top: 5px;
    left: 10px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 -1px rgba(0,0,0, .15);
}

Upvotes: 4

Views: 529

Answers (1)

Linus Caldwell
Linus Caldwell

Reputation: 11078

There is a bug in webkit (or at least Chrome) with the combination of border-radius, overflow: hidden and position other than static. Your example link on twitter uses static position. So I'd say your only option is to use position: static. I modified your code to do so:

<div id="SuggestComplete">
   <div id="SuggestProgressContainer">
       <div id="SuggestProgressBar">
           <div id="SuggestProgress"></div>
       </div>
       <span id="ProgressText">Follow 5 collections</span>
   </div>
</div>

<div id="button">test</div>

CSS:

#SuggestProgressContainer {
    height: 27px;
    float: left;
    margin: 4px 20px 0 0;
    position: relative; top: 0; left: 0;
    width: 247px;
    /*overflow: hidden;

    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;*/ /* removed here */
}

#SuggestProgressBar {
    width: 247px;
    height: 27px;
    background: #c6c6c6;
    border: 1px solid #bfbfbf;
    position: absolute; top: 0; left: 0;

    /* added overflow and border radius here */
    overflow: hidden;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

#SuggestProgress {
    height: 100%;
    width: 50px;
    /*position: absolute; top: 0; left: 0;*/ /* so it is static to prevent the bug */
    border: 1px solid #068CE1;
    background: #0F93E7;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1c9dee), to(#068ce1));
    background: -webkit-linear-gradient(top, #1c9dee, #068ce1);
    background: -moz-linear-gradient(top, #1c9dee, #068ce1);
    background: -ms-linear-gradient(top, #1c9dee, #068ce1);
    background: -o-linear-gradient(top, #1c9dee, #068ce1);

    -webkit-transition: width 230ms ease-out;
       -moz-transition: width 230ms ease-out;
        -ms-transition: width 230ms ease-out;
         -o-transition: width 230ms ease-out;
            transition: width 230ms ease-out;
}

Which seems to work. Here is a demo.

The funny part is that the issue described in the bug report seems to be fixed because back then the problem occurred even without programmatically changing the width. But it looks like they forgot to solve the issue on rerender events too.

Upvotes: 2

Related Questions