Images Border-Radius Doesn't Work During CSS Transition

Images border-radius doesn't work during css transition

I believe on transition, the element gets taken out of document flow, something like a shadow position: relative; and put back in once the animation is complete.

If you force the z-index of the parent to be higher than that of the child, the parent should continue to clip the overflow.

http://jsfiddle.net/cyvL61qx/4/

figure.effect-park {
    background-color: #0D4C16;
    border-radius: 50%;
    z-index: 1;
}

figure.effect-park img {
    z-index: 0;
    opacity: 0.5;
    -webkit-filter: blur(1.5px);
    filter: blur(1.5px);
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
    transition: opacity 0.2s, transform 0.2s;
}

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>

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/

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>

Border-radius doesn't work when background isn't applied

Without any background color you can't see the animation but it still persist.

Here an example with your animation applied also to a div without background color but with border (to see what happen)

https://jsfiddle.net/cjohm3xb/1/

   .square-border {
      border:1px solid red;
      /* apply the animation */
      animation: box 8s linear infinite;
    }

CSS parent border-radius not being applied during transform scale of child

Update: As of late, this seems to be happening again, but only in elements using CSS columns. I've filed it as a Chromium bug here.

Update 2: Filed bug was closed as "Won't fix" as it has already been somewhere between v75.* and v77.0.3833.0, there's currently no available info on what caused it and what fixed it.

---

By default, transform does not trigger a repaint on the parent node at each animation frame, which is precisely why it's the recommended method of animation, along with opacity (which has the same behavior).

But in your case, you want this repaint after each frame. So you need to apply a cheap transform on the parent as well.

In your case, a simple rotate(0) will suffice, but note there are cases when you want to keep the 3d engine running, in which case a good candidate is rotateZ(0).

Additionally, to make sure there's no space between the bottom of the image and it's wrapper, you could apply display:block to the <img>:

.container {  column-count: 2;}
.item {  width: 100%;  overflow: hidden;  border-radius: 10px;  transform: rotate(0);}
img {  max-width: 100%;  max-height: 100%;  transition: all 0.2s;  display: block;  min-width: 100%;}
img:hover {  transform: scale(1.1);}

<div class="container">
  <div class="item">    <img src="https://images.unsplash.com/photo-1558834643-1dacaf774843?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60">  </div></div>

CSS3 Transition border-radius issue (Delayed on hover)

The problem is the border-radius. You use:

border-radius: 50px;

You need to use half of the width of your element as the border-radius; since your element is 50px wide, use 25px or, as noted by @david-thomas, 50%.

border-radius: 50%;

See http://jsfiddle.net/DhQxV/1/

It does not matter if you use a border radius of 100px or 1000px; if your width is 50px the result is the same. However, if you animate the radius then it will affect your animation and cause delay.

---

Related Topics