Transition breaks the overflow hidden rule for images with border-radius in Web-kit browsers

Question

I have this transition issue with a circle container set to overflow:hiddenand an image in it set to scale up on hover with a css transition: all 1s ease.

It's not working correctly in Web-kit browsers (i tested in Chrome and Opera)

the problem seems that while the scaling is preforms the parent container's overflow:hidden takes a break and snaps back when the transition is over, this however only effects the image's border-radius and the original form of the image (the box) is reveled for as long as it takes to get the scaling done.

In other browser it works fine. (FF, Edg, IE)

See sample here: https://jsfiddle.net/s7qeb4rL/13/

Is this a Web-Kit bug or is it just the way images are rendered in web-kit for the long haul.

Code belongs in your question first, with a jsFiddle link optionally second. Don't try sidestepping the warning you saw -- do as you were asked. — j08691, Feb 11 '16 at 19:59
Possible duplicate of [How to make CSS3 rounded corners hide overflow in Chrome/Opera](http://stackoverflow.com/questions/5736503/how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera) — Bram Vanroy, Feb 11 '16 at 20:03
@j08691 Not only that, it's also easy to find if one uses the search function. Marked as duplicate. — Bram Vanroy, Feb 11 '16 at 20:03
@bramvanroy I fixed the Q, and posted an updated Fiddle, I'm sorry for not helping you understand the "real and not so silly Web-kit issue" — Moses Schwartz, Feb 11 '16 at 20:41

score 1 · Accepted Answer · answered Feb 11 '16 at 20:33

try this code...

.circle{

 float:left;
 width:19vw;
 height:19vw; 
 border-radius:50%;
 overflow:hidden;
 margin:2.2vw;
    display:block;
 position: relative;
 border:10px solid rgb(96, 67, 58);
    
 
}


.contain-pic-nyn{

  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  overflow:hidden;
  transition: all 1s ease;
}

.contain-pic-nyn img{
  width: 100%;
  height: 100%;
}

.circle:hover .contain-pic-nyn{
 
overflow:hidden;

  right: -20px;
  left: -20px;
  top: -20px;
  bottom: -20px;

    
  
  transition: all 1s ease;

    
}

<body>
 
<div class="circle">
<div class="contain-pic-nyn">
<img src="http://lorempixel.com/400/400/sports/" alt="picture"width="100%" height="100%">


</div>
</div>

This is a very nice solution to get the same effect as the css scale property, very nicely done - here is a clean fiddle for it https://jsfiddle.net/kz3rnvwr/10/ - the concept of image with 100% and to scale the container instead, with absolute positioning and negative location is a very good substitute and would be supported by most browsers — Moses Schwartz, Feb 11 '16 at 20:58

Transition breaks the overflow hidden rule for images with border-radius in Web-kit browsers

1 Answers1