CODEWITHSUNDEEP
cssgoogle-chromesafariwebkitoverflow
Dustin
Dustin

Reputation: 4459

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

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?

Upvotes: 44

Views: 34553

Answers (8)

HandiworkNYC.com
HandiworkNYC.com

Reputation: 11104

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);
}

Upvotes: 109

Enrique
Enrique

Reputation: 9

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

isolation: isolate;

Upvotes: 0

Elvinn
Elvinn

Reputation: 39

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.

Upvotes: -1

allenski
allenski

Reputation: 1843

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

Upvotes: 6

Azhar
Azhar

Reputation: 723

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);
}

Upvotes: 3

mateostabio
mateostabio

Reputation: 1028

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.

Upvotes: -1

Rijo
Rijo

Reputation: 2718

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

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

li img {z-index: -10;}

Upvotes: 2

mikevoermans
mikevoermans

Reputation: 4007

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/

Upvotes: 1

Related Questions