带有边框半径和溢出隐藏的转换在 Safari 中不起作用

2022-01-22 00:00:00 hover css safari css-transitions

这可能是一个常见问题,但我找不到答案.理解这个问题的最好方法是看这个小提琴:http://jsfiddle.net/sxvjejvk/

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/

基本上我有一个带有 border-radiusoverflow:hidden 的 div.div里面是一张图片.当我将鼠标悬停在 div 上时,我希望图像使用过渡进行缩放.但是,div 的边框半径会在动画期间中断(不再有圆角).

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.

-webkit-transform:translateZ(0) 添加到 div 可在 Chrome 中修复此问题,但在 Safari 中不起作用.有谁知道这个问题有解决办法吗?

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?

推荐答案

您可以通过为具有溢出的父元素添加 webkit-mask-image 来修复它:隐藏

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

相关文章