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

css google-chrome safari webkit overflow
Dustin picture Dustin · Jan 17, 2013 · Viewed 24k times · Source

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. The div has a border radius and overflow set to hidden. 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?

Answer

HandiworkNYC.com picture HandiworkNYC.com · May 22, 2013

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

Related questions

How can I force WebKit to redraw/repaint to propagate style changes?

I have some trivial JavaScript to effect a style change: sel = document.getElementById('my_id'); sel.className = sel.className.replace(/item-[1-9]-selected/,'item-1-selected'); return false; This works fine with the latest versions of FF, Opera and IE, but …

Read More
Chrome & Safari Error::Not allowed to load local resource: file:///D:/CSS/Style.css

When I access my aspx page in chrome or safari it shows this error in console Not allowed to load local resource: file:///D:/CSS/Style.css Everything works fine in IE and FF. I use an external CSS which …

Read More
Safari font rendering issues

As you can see below, the Texta-Light font in Chrome appears completely different with Safari. Chrome displays the font as I like but Safari's rendering on OS X and iOS looks too thin. The Safari image below is taken on …

Read More