絶対配置された要素上にborder-radiusをアニメーション化しないWebkit

Question

子要素のマスクとして機能する親要素のborder-radiusをアニメーション表示しようとしています。画像にposition:absoluteがない限り、これはうまくいきます。この場合は必要です。アクションで問題（Firefoxで正常に動作します）：

https://jsfiddle.net/dcm5kwvp/2/

編集：私は解決策を見つけた

setTimeout(function() { 
 
\t document.querySelector('.mask').classList.add('loaded'); 
 
}, 100);

.mask { 
 
    width: 100%; 
 
    height: 300px; 
 
    border-radius: 0; 
 
    transition: border-radius .3s ease; 
 
    overflow: hidden; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
.mask.loaded { 
 
    border-radius: 0 0 50% 50%; 
 
} 
 

 
figure { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    z-index: -1; 
 
}

<div class="mask"> 
 
<figure> 
 
    <img srcset="https://images.unsplash.com/photo-1470434151738-dc5f4474c239?dpr=1&auto=format&crop=entropy&fit=crop&w=1199&h=799&q=80&cs=tinysrgb"> 
 
</figure> 
 
</div>

Answer 1

コードスニペット。これはposition: absoluteが無効になっているWebkitエンジンのバグですoverflow: hidden。

解決するには、-webkit-mask-imageをマスクを使用して要素に追加することをお勧めします。この場合、それは単一のピクセルであり、base64イメージとして埋め込まれます。

setTimeout(function() { 
 
\t document.querySelector('.mask').classList.add('loaded'); 
 
}, 100);

.mask { 
 
    width: 100%; 
 
    height: 300px; 
 
    border-radius: 0 0 0 0; 
 
    transition: border-radius .3s ease; 
 
    overflow: hidden; 
 
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); 
 
    position: relative; 
 
} 
 

 
.mask.loaded { 
 
    border-radius: 0 0 50% 50%; 
 
} 
 

 
figure { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
}

<div class="mask"> 
 
<figure> 
 
    <img srcset="https://images.unsplash.com/photo-1470434151738-dc5f4474c239?dpr=1&auto=format&crop=entropy&fit=crop&w=1199&h=799&q=80&cs=tinysrgb"> 
 
</figure> 
 
</div>