Question

我正在动画打开一个灯箱（没什么特别或疯狂的），并且在Chrome，Opera和Safari中遇到了border-radius问题。所有其他浏览器（包括我测试过的移动浏览器）工作得很好。基本上，在点击DIV后，灯箱会在打开时从一个边界半径动画到另一个边界半径。 DIV内部的内容在动画（剪辑）期间溢出。其他浏览器没有这方面的问题，从研究我已经完成它的Webkit不尊重溢出：隐藏。

这是打开灯箱的JS（内部点击事件）：

$('#SC_Lightbox').css({
borderTopLeftRadius:'100px',
borderTopRightRadius:'100px',
borderBottomLeftRadius:'100px',
borderBottomRightRadius:'100px',
WebkitBorderTopLeftRadius:'100px',
WebkitBorderTopRightRadius:'100px',
WebkitBorderBottomLeftRadius:'100px',
WebkitBorderBottomRightRadius:'100px',
MozBorderRadius:'10px',
borderRadius:'10px'})
.animate({
'opacity':1,'width':'300px','height':'500px','top':'120px','left':'200px',
borderTopLeftRadius:'10px',
borderTopRightRadius:'10px',
borderBottomLeftRadius:'10px',
borderBottomRightRadius:'10px',
WebkitBorderTopLeftRadius:'10px',
WebkitBorderTopRightRadius:'10px',
WebkitBorderBottomLeftRadius:'10px',
WebkitBorderBottomRightRadius:'10px',
MozBorderRadius:'10px',
borderRadius:'10px'
},{duration:500,queue:false});

以下是Lightbox的CSS（加载后应用的所有内容）：

#SC_Lightbox {
    background-color: #333333;
    border-radius: 12px 12px 12px 12px;
    display: block;
    height: 350px;
    left: 500px;
    opacity: 1;
    overflow: hidden;
    top: 20px;
    width: 500px;
    position: absolute;
    z-index: 99999999;
    line-height: 1;}

另一个奇怪的是，有问题的浏览器似乎也有动画/渲染WebkitBorderBottomRightRadius ???的问题

我还尝试了另一个论坛建议，并补充道：

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

强制溢出：隐藏在Webkit中，但遗憾的是有一个盒子阴影可以通过执行此操作来删除，这也是一个非常不稳定的解决方案。

有人有什么想法吗？谢谢！

Webkit边界半径动画剪辑

0 个答案: