Frame radius changes when setting CSS width using jQuery

Question

The problem I ran into is that border-radius from <div/> is removed when applying the css width property via jQuery. <div/> having a radius is also clipped with absolute located by <div/> . I gave an example below:

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

Here's 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); } 

Answer 1

There is a bug in webkit (or at least Chrome) with a combination of border-radius , overflow: hidden and position other than static . Your twitter link uses a static position. Therefore, I would say that your only option is to use position: static . I modified your code to do this:

 <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; } 

This seems to work. Here is a demo .

The funny thing is that the problem described in the error report seems to be fixed, because then the problem occurred even without programmatically changing the width . But it seems that they too forgot to solve the problem on the events of the repander.