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?

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. — bschnur
– bschnur, Commented Apr 19, 2013 at 16:50
Please look at this: stackoverflow.com/questions/20001515/… This is the final answer and best solution! — Jay Chow
– Jay Chow, Commented Aug 7, 2015 at 8:37
Related Safari/Webkit bug: bugs.webkit.org/show_bug.cgi?id=68196 — Oliver Joseph Ash
– Oliver Joseph Ash, Commented May 19, 2020 at 19:07

Zach Saucier · Accepted Answer · 2023-10-17 22:04:34Z

109

I had the same exact issue. Adding this to the parent container solved it for me.

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

edited Oct 17, 2023 at 22:04

Zach Saucier

26.2k12 gold badges101 silver badges161 bronze badges

answered May 21, 2013 at 23:25

HandiworkNYC.com

11.1k25 gold badges95 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

woutvdd Over a year ago

Still breaks in Safari, if you test my jsFiddle in Safari jsfiddle.net/d4h2t0Lt

Tanase Butcaru Over a year ago

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 plnkr.co/ayRgf52URQQ5XLqQtZVJ

Ivan Akulov Over a year ago

In a fresh Chrome, you could add will-change: transform property instead of the mixin. It’ll work the same.

allenski · Accepted Answer · 2021-03-02 17:02:46Z

6

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

answered Mar 2, 2021 at 17:02

allenski

1,8615 gold badges29 silver badges40 bronze badges

2 Comments

PayteR Over a year ago

This was correct solution for me

Zach Saucier Over a year ago

In my case I needed to not only apply will-change: transform to the element being animated (the parent) but also to the child svg element that I was animating.

Olivier Tassinari · Accepted Answer · 2020-12-19 23:45:24Z

4

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, 2020 at 23:45

Olivier Tassinari

8,7406 gold badges26 silver badges28 bronze badges

answered Oct 9, 2019 at 4:50

Azhar

7239 silver badges23 bronze badges

Comments

Rijo · Accepted Answer · 2017-06-24 06:16:01Z

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, 2017 at 6:16

answered Jun 23, 2017 at 9:53

Rijo

2,7381 gold badge24 silver badges30 bronze badges

1 Comment

Zach Saucier Over a year ago

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

mikevoermans · Accepted Answer · 2013-01-17 16:42:53Z

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, 2013 at 16:42

mikevoermans

4,00725 silver badges27 bronze badges

1 Comment

Dustin Over a year ago

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.

Enrique · Accepted Answer · 2022-11-04 17:52:41Z

0

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

isolation: isolate;

answered Nov 4, 2022 at 17:52

Enrique

91 bronze badge

Comments

mateostabio · Accepted Answer · 2018-08-03 03:29:22Z

-1

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.

answered Aug 3, 2018 at 3:29

mateostabio

1,0489 silver badges12 bronze badges

Comments

Elvinn · Accepted Answer · 2021-10-27 14:48:01Z

-1

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.

answered Oct 27, 2021 at 14:48

Elvinn

393 bronze badges

Collectives™ on Stack Overflow

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

8 Answers 8

3 Comments

-- Simple Solution --

2 Comments

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

3 Comments

-- Simple Solution --

2 Comments

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related