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

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

98

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,572
24
90
151

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 – tbutcaru 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

Rijo · Answer 2 · 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,159
1
19
25

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

2

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

7,096
4
18
21

answered Oct 09 '19 at 04:50

Azhar

642
9
20

score 2 · Answer 4 · 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

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,947
20
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 1 · Answer 6 · edited May 23 '17 at 11:46

1

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 for a possible solution.

edited May 23 '17 at 11:46

Community

1
1

answered Apr 19 '13 at 16:50

bschnur

360
3
9

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 · edited May 20 '20 at 14:47

-1

The above answer worked for me, but with a little tweak;

border: solid 0px transparent;

edited May 20 '20 at 14:47

double-beep

4,567
13
30
40

answered May 20 '20 at 14:45

Mr. Ortiizz

1

2

You do not know which answer I see "above", because my sorting is unpredictable for you. Please use a unambiguous reference. Also, adding an explanation of your code tweak would be appreciated. – Yunnosch May 20 '20 at 14:48

score -1 · Answer 9 · 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

9 Answers9

-- Simple Solution --

Linked