3

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?

SnareChops
  • 13,175
  • 9
  • 69
  • 91
Leon
  • 1,999
  • 22
  • 38
  • Please see this http://stackoverflow.com/questions/20620441/webkit-border-radius-and-transition-bug – Aliasgar Rajpiplawala Sep 17 '14 at 13:28
  • 1
    I don't see how that fixes my issue.. – Leon Sep 17 '14 at 14:09
  • A partial fix is to use the image as a background image on an empty div instead of an `` element. Or use a `-webkit-mask-image:` of a rounded rectangle. – fontophilic May 28 '15 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. – Domske Oct 28 '19 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: https://forum.webflow.com/t/overflow-hidden-round-corners-not-working-on-safari/67805/3 (But in fact. It's also in Chrome (mobile)). – Domske Oct 28 '19 at 13:12
  • It's because the new Chrome v. 78. Corova uses this as WebView. If I disable (uninstall) it, it works again. Argh... So the Chrome WebView has a new bug. – Domske Oct 28 '19 at 14:21
  • Chrome v65 (and I guess the last version v77 more or less) works. But Chrome v78 not. Only on my Huawei M3 lite 10 Android 7. On another Device with Android 9 and same Chrome version it works. Maybe there are some hardware driver changes. My think this bug will never be fixed. – Domske Oct 28 '19 at 14:31
  • Or try https://stackoverflow.com/a/64885552/4997994 – oomer Oct 06 '22 at 18:35

3 Answers3

11

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);
Roger Burkhard
  • 520
  • 5
  • 8
  • 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. – Domske Oct 28 '19 at 15:05
5

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

pasevin
  • 1,436
  • 1
  • 12
  • 14
1

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

Ramin Khodaie
  • 242
  • 3
  • 10