4

This might be a common issue, but I couldn't find the answer. Best way to understand the problem is to look at this fiddle: http://jsfiddle.net/sxvjejvk/

Basically I have a div with a border-radius and overflow:hidden. Inside the div is an image. When I hover over the div, I want the image to scale, using a transition. However, the border-radius of the div breaks (it doesn't have rounded corners anymore) for the duration of the animation.

Adding -webkit-transform:translateZ(0) to the div fixes this in Chrome, but it doesn't work in Safari. Does anyone know if there's a fix for this?

Improve this question
8
  • Please see this stackoverflow.com/questions/20620441/… Commented Sep 17, 2014 at 13:28
  • 1
    I don't see how that fixes my issue.. Commented Sep 17, 2014 at 14:09
  • A partial fix is to use the image as a background image on an empty div instead of an <img> element. Or use a -webkit-mask-image: of a rounded rectangle. Commented May 28, 2015 at 14:22
  • Today I have the same issue on an Android device with Cordova (WebView Chrome). Weird, a few days before it worked well. But today suddenly not. Ok, maybe an automatic system software update. In my case I have svg elements animated in a overflow-hidden parent with border-radius to a circle. And when I animate transform-translate of the svg childs they become overlapped the border-radius (not the rectangle, only the radius). When I disable the animation in the DevTools the overflow-hidden works as well for the svg elements. Weird.... I don't know what happend. No updates in the log. No changes. Commented Oct 28, 2019 at 13:05
  • 1
    My workaround is to use margin or left / top to move the elements, instead of transform-translate. Currently it's not perfect. But I have to polish it. That bug is really annoying. Also see: forum.webflow.com/t/… (But in fact. It's also in Chrome (mobile)). Commented Oct 28, 2019 at 13:12

3 Answers 3

Reset to default
12

You can fix it by adding webkit-mask-image for the parent element which has overflow:hidden

-webkit-mask-image: -webkit-radial-gradient(white, black);
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Since a few days the bug is also present on Chrome / Chormium. On Android with Cordova (WebView). I tested it with an older version of Chrome. (v65) it works. The latest version (v78) does not work. Over the weekend the tabled updated it automatically. Nice surprise. -.- Thanks this workaround fixes the problem for this moment and this case. At the first I replaced the transform translate by left/top movement. This also fixes the problem. But in my case with some glitches and higher CPU usuage. The transform translate is much smoother because it uses GPU accel.
5

Adding will-change: transform; to the overfow: hidden item works better for me on mobile Safari.

Improve this answer

Comments

1

Adding border-radius to parent element while hovering works for me.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.