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

Question

I am having getting a weird bug when I use a combination of overflow, border-radius, and transition. I have a div with an img inside of it:

<a href="#" class="block size1 annualreport nonprofit">
    <div class="inner_block">
        <img src="http://i.imgur.com/8uuZB.jpg" />
    </div>
</a>

The div has a border-radius, and overflow is set to hidden:

body {background-color:#78735e;}

.block {
    position: absolute;
    left: 0px;
    top: 0px;
    border-radius: 10px;
    margin: 6px;
    box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2);
    overflow:hidden;
}
.size1 {
    width: 226px;
    height: 464px;
    min-width: 160px;
    max-width: 226px;
}
.inner_block {
    overflow: hidden;
    border-radius: 10px;
}
.block img {
    width: 100%;
    height: 100%;
    transition: all 0.1s;
}

.block img:hover { width:115%; height:115%; }

When I hover over the img I have a transition that takes place which makes the image larger to create a zooming effect. The problem is that the overflow seems to break on the bottom left and bottom right of the image.

I have created a JSFiddle for you to see what I'm talking about. http://jsfiddle.net/dmcgrew/HuMrC/1/

It works fine in Firefox, but breaks in Chrome and Safari.

Anyone know what might be causing this or how to fix it?

Please look at this: http://stackoverflow.com/questions/20001515/chrome-bug-border-radius-not-clipping-contents-when-combined-with-css-transiti This is the final answer and best solution! — Jay Chow, Aug 07 '15 at 08:37
Related Chromium bug: [#157218](https://code.google.com/p/chromium/issues/detail?id=157218). — Ivan Akulov, Nov 13 '15 at 14:19
Related Safari/Webkit bug: https://bugs.webkit.org/show_bug.cgi?id=68196 — Oliver Joseph Ash, May 19 '20 at 19:07
The accepted answer didn't work for me because I can't have the clear border increasing the clickable area of the masked element, nor do I want it to obscure that of other elements (and setting the height to 100% didn't solve the issue). See [my answer to a related question](https://stackoverflow.com/a/16109635/1502691) for a possible solution. — bschnur, Apr 19 '13 at 16:50

score 107 · Answer 1 · answered May 21 '13 at 23:25

107

I had the same exact issue. Adding this to the parent container solved it for me (this is a LESS mixin).

.transitionfix() {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0)
}

answered May 21 '13 at 23:25

HandiworkNYC.com

10,914
25
92
154

Thanx for your answer, was about to post my own question :) Thanx! – Danny van Holten Jul 13 '14 at 22:56
1

Still breaks in Safari, if you test my jsFiddle in Safari http://jsfiddle.net/d4h2t0Lt/ – woutvdd Nov 14 '14 at 15:50
Thanks! This worked for me on both Chrome and Safari for Mac (v7.1.2). If you remove the /* FIX */ lines from the CSS file and then filter list by typing "ja", you'll see (on webkit) that Jay-z's avatar will ignore overflow & border-radius during animation. See my plunker here http://plnkr.co/ayRgf52URQQ5XLqQtZVJ – Tanase Butcaru Jan 04 '15 at 02:37
2

In a fresh Chrome, you could add `will-change: transform` property instead of the mixin. It’ll work the same. – Ivan Akulov Nov 13 '15 at 14:16
Awesome! Thank you very much. – Daniele Orlando Sep 09 '18 at 16:03
Awesome! Worked – kernel Jul 19 '23 at 11:10

score 5 · Answer 2 · answered Mar 02 '21 at 17:02

-- Simple Solution --

On the same element that has the animation transition, simply add:

.animated-item {
    will-change: transform; /* New line to add to your existing CSS */
}

The will-change CSS property hints to browsers how an element is expected to change. Browsers may set up optimizations before an element is actually changed. These kinds of optimizations can increase the responsiveness of a page by doing potentially expensive work before they are actually required. ~ https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

This was correct solution for me – PayteR Mar 31 '23 at 22:15 — PayteR, Mar 31 '23 at 22:15

score 3 · Answer 3 · edited Dec 19 '20 at 23:45

3

I have faced this issue on Safari(It's a known bug in safari); fixed it by applying -webkit-mask-image and it works for me perfectly. cheers

.block {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

edited Dec 19 '20 at 23:45

Olivier Tassinari

8,238
4
23
23

answered Oct 09 '19 at 04:50

Azhar

693
9
22

Rijo · Answer 4 · 2017-06-24T06:16:01.727

2

I added minus z-index value for image and higher value for parent

li {z-index:10; overflow: hidden;}

li img {z-index: -10;}

edited Jun 24 '17 at 06:16

answered Jun 23 '17 at 09:53

Rijo

2,568
1
22
30

z-index does not cancel out like this. This logic is flawed. Adding a z-index may help, but the reasoning (and having 2 like this) is incorrect – Zach Saucier Oct 18 '22 at 15:41

score 1 · Accepted Answer · answered Jan 17 '13 at 16:42

1

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/

answered Jan 17 '13 at 16:42

mikevoermans

3,967
22
27

2

Yep that seems to fix it. I was also just able to fix it by adding a border with transparent color to the .block div. – Dustin Jan 17 '13 at 16:50

score 0 · Answer 6 · answered Nov 04 '22 at 17:52

0

There's already an answer about a CSS property for creating a new stacking context:

isolation: isolate;

answered Nov 04 '22 at 17:52

Enrique

9
1

score -1 · Answer 7 · answered Aug 03 '18 at 03:29

I've had an issue in the past like this while trying to zoom into a photo inside a div. I fixed it by adding rotation scale(1.05) rotate(0.02deg) to the scale transform (It actually removed the glitchy lines)

My issue today is getting the glitch lines off a translateY div hover effect. Surprisingly enough, I got rid of them by removing overflow: hidden;

Hopefully this helps future debuggers.

score -1 · Answer 8 · answered Oct 27 '21 at 14:48

It is a problem about stacking context.

We can use methods listed in MDN - stacking context to form a stacking context:

position: relative; z-index: 1;
-webkit-mask-image: -webkit-radial-gradient(white, black);
opacity: 0.999;
will-change: transform;

For me personally, the first method is the best.

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

8 Answers8

-- Simple Solution --

Linked