3

我正在动画打开一个灯箱（没什么特别或疯狂的），并且在 Chrome、Opera 和 Safari 中遇到边框半径问题。所有其他浏览器（包括我测试过的移动浏览器）都可以正常工作。基本上，单击 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});

这是灯箱的 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 中，但不幸的是，这样做会删除一个盒子阴影，这也是一个非常不稳定的解决方案。

有人有想法么？谢谢！

4

0 回答 0