Webkit Border Radius and Transition Bug

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

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.

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.

Overflow: hidden with border radius not working on Safari

The accepted answer works, but indeed it removes the box shadow. A comment I saw in this github post says that it can be also fixed by creating a new stacking context (kind of moving an element into a new painting layer). That can be achieved with a small hack like

    transform: translateZ(0)

In my case both overflow and box-shadow are working with this solution. I hope it helps somebody else too.

UPD: just like Jad Haidar suggested in the comments isolation is a property specifically for working with the stacking context:

isolation: isolate;