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

鉴于我的 CodePenhttps://codepen.io/scottmgerstl/pen/MpMeBy 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>

描述

我正在尝试在线性渐变上使用 CSS 过渡（profile-pic-overlay）被边界半径（profile-pic-wrapper）。所需的行为是当圆形图像容器悬停在其上时获得个人资料图像，线性渐变会淡入视图，指示您可以查看个人资料。

问题

渐变不遵循边界半径的界限。我试过这个答案 https://stackoverflow.com/questions/27934887/images-border-radius-doesnt-work-during-css-transition但当我这样做时，线性渐变不会过渡。 @Keyframe 动画也没有帮助。

有任何想法吗？

Edit

这似乎仅是 Windows 上 Chrome 的问题

据我测试，该问题与<a>渐变层的容器。在此处搜索如何解决此问题时，您可以添加一些属性，这些属性将覆盖大多数浏览器：

will-change https://developer.mozilla.org/es/docs/Web/CSS/will-change & transform:translate3d https://developer.mozilla.org/es/docs/Web/CSS/transform-function/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 演示 https://codepen.io/anon/pen/qrzaay

_{Note: Info adapted from this answer https://stackoverflow.com/a/16681137/2887133, I want to post here my answer to suit your case beacuse you need to do it on a tag and parent tag, but if you want we can close it as dup.}