Webkit Border-Radius and Overflow Bug When Using Any Animation/Transition

Webkit border-radius and overflow bug when using any animation/transition

I don't know if I'm understanding the problem correctly as the image isn't loading. If you add height: 100%; to .inner_block does it help your issue?

http://jsfiddle.net/HuMrC/2/

WebKit border radius and transition bug

You can fix it 2 ways:

  .thumb {
    position:relative;
    overflow: hidden;
    width:100%;
    border: 10px solid red;
    border-radius:55px;
    &:hover {

        .caption {
       background-color:red;
        }
      }
  }
  .caption {
      position: absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
       background-color:transparent;
        border-radius: 35px;
    @include transition(all 3s ease-in-out);
  }

a) setting border radius in the inner element

b) setting background-color: transparent and transitioning that

css3 border radius animation transition in safari not working

This is a simple fix, Safari does not support the transition from pixels to percentages. If you change your hover styles from 50% to 100px you will see that your transitions will work smoothly.

.all a:hover img {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px
    border-radius: 100px;

}

You may want to set them to any value that is double the height and width of your images to ensure they will always be rounded when hovered.

Webkit not respecting overflow:hidden with border radius

You could put an absolute positioned div over it with a border-radius and a thick black border, it will block the parts you want too be hidden.

I made a demo for another question about a similar problem in FF3.6: http://jsfiddle.net/vfp3v/15/

border-radius; overflow: hidden, and text is not clipped

Chrome bug - border radius not clipping contents when combined with css transition

After some more experiments I've finally found the solution. Sometimes simple ones are the hardest to find. In this case #above {z-index: 1;} (like in http://jsfiddle.net/UhAVG/1/) solves the issue. Wild guess is that z-index prevents some optimization that combines operations from single layer and doing so mistakenly optimizes out applying border-radius on element. With layers separated this is no longer the case.

hover on overflow-hidden and border-radius bug

I think this has to do with the relative positioning. If you drop the relative positioning on .innerw2, and use margin-left instead, this no longer occurs.

---

Related Topics