具有边框半径和线性渐变的 CSS 过渡

Question

鉴于我的 CodePen https://codepen.io/scottmgerstl/pen/MpMeBy这是我的图像布局问题

<span class="profile-pic-wrapper">
    <a href="https://www.google.com" target="_blank">
        <img class="profile-pic" src="http://i-cdn.phonearena.com/images/article/67689-image/Video-shows-Super-Mario-64-HD-playing-on-the-Apple-iPhone-6.jpg"/>
        <span class="profile-pic-overlay">
            <span class="social-icon">View Profile</span>
        </span>
     </a>
</span>

描述

我正在尝试在被边界半径 (profile-pic-wrapper) 剪裁的线性渐变 (profile-pic-overlay) 上使用 CSS 过渡.理想的行为是在圆形图像容器悬停在上方时显示个人资料图像，线性渐变逐渐淡入 View ，表明您可以查看个人资料。

问题

渐变不遵循边框半径的边界。我试过 this answer但是当我这样做时，线性渐变不会过渡。 @Keyframe 动画也无济于事。

有什么想法吗？

编辑

这似乎只是 Windows 上的 Chrome 的问题

Answer 1

据我所知，问题与 <a> 有关渐变层的容器。在此处搜索如何解决此问题，您可以添加一些适用于大多数浏览器的属性:

will-change & transform:translate3d

将此添加到您的代码中:

.profile-pic-wrapper, .profile-pic-wrapper a {
  display:block;
  -webkit-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);
  will-change:transform;
}

Codepen Demo

---

_{注意:信息改编自this answer ，我想在这里发布我的答案以适合您的情况，因为您需要在标签和父标签上执行此操作，但如果您愿意，我们可以将其作为 dup 关闭。}