Overflow:Hidden Ignored with Border-Radius and CSS Transforms (Webkit Only)

overflow:hidden ignored with border-radius and CSS transforms (webkit only)

I removed some superfluous markup (the circle and square containers... only needs one) and styled the img itself:

#wrapper {  width: 500px;  height: 500px;  border-radius: 50%;  overflow: hidden;  -webkit-mask-image: -webkit-radial-gradient(circle, white, black);}
#test {  width: 100%;  height: 100%;  transition: all 2s linear;}
#test:hover {  transform: scale(1.2);}

<div id="wrapper">  <img src="http://rack.3.mshcdn.com/media/ZgkyMDEzLzA1LzA4L2JlL2JhYmllc193aXRoLjA5NGNjLnBuZwpwCXRodW1iCTg1MHg1OTA-CmUJanBn/8f195417/e44/babies_with_swagg.jpg" id="test"></div>

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

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)

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/

Border-radius not working during CSS transform

1px as width/height is not a good idea, I would do it differently and start at scale(0):

var menuButton = document.querySelector('.btn-menu');
menuButton.addEventListener('click', function(e) {
  e.preventDefault();
  document.body.classList.toggle('menu-open');
});

.btn-menu {
  width: 30px;
  height: 30px;
  border: 2px solid red;
  position: relative;
  z-index: 5;
  float: right;
}

.menu-bg {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 40;
  pointer-events: none;
  z-index: 1;
}

.menu-bg:before {
  content: '';
  height: 100px;
  width: 100px;
  background: #000;
  position: fixed;
  right: -20px;
  top: -20px;
  transition: all ease .8s;
  border-radius: 50%;
  transform: scale(0);
  overflow: hidden;
}

.menu-open .menu-bg:before {
  transform: scale(5);
}

<div class="btn-menu"><a href=""><span>Menu</span></a></div>
<div class="menu-bg"></div>

Bug with transform: scale and overflow: hidden in Chrome

It's a known bug in Webkit-based browsers - see #62363. You can add a border:1px solid transparent; to your .wrap class to workaround the problem.

For the updated requirement, adding a transition to an element with a border-radius, that's another known Chomre/Webkit bug #157218. Sorry but no known general workaround still, although one comment on that bug says that using the chrome://flags and using the --ignore-gpu-blacklist flag fixes it in Chrome 29 (which just hit the Chrome dev channel today).

Overflow:Hidden Ignored with Border-Radius and CSS Transforms (Webkit Only)