3

私はライトボックスを開いてアニメーション化しています（特別なものでも狂ったものでもありません）が、Chrome、Opera、および Safari で境界半径の問題が発生しています。他のすべてのブラウザー (私がテストしたモバイル ブラウザーを含む) は問題なく動作します。基本的に、DIV をクリックすると、ライトボックスが開いている間、ある境界半径から別の境界半径にアニメーション化されます。アニメーション中に DIV 内のコンテンツがはみ出します (クリッピング)。他のブラウザではこれに問題はありません。私が行った調査によると、Webkit は overflow:hidden を尊重していません。

ライトボックスを開く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;}

もう1つの奇妙なことは、問題のあるブラウザーにもWebkitBorderBottomRightRadiusのアニメーション化/レンダリングに問題があるように見えることです???

また、別のフォーラムの提案を試して追加しました：

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

Overflow:hidden を Webkit に強制するには、残念ながら、これを行うことで削除されるボックス シャドウがあり、これも非常に途切れ途切れのソリューションです。

誰にもアイデアはありますか？ありがとう！

4

0 に答える 0