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

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

本文介绍了带有边界半径和隐藏溢出的转换过渡在Safari中不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这可能是一个常见问题,但我找不到答案。理解此问题的最佳方法是查看以下小提琴:

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/

基本上,我有一个div,其 border-radius overflow:hidden 。 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.

在div中添加 -webkit-transform:translateZ(0)可以在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);

这篇关于带有边界半径和隐藏溢出的转换过渡在Safari中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-12 08:20