CSS Transition with Border Radius and Linear Gradient

问题

Given my CodePen https://codepen.io/scottmgerstl/pen/MpMeBy this is my image layout in question

<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>

Description

I am trying to use a CSS transition on a linear gradient (profile-pic-overlay) that is clipped by a border radius (profile-pic-wrapper). The desired behavior is to have a profile image when, the rounded image container is hovered over, a linear gradient fades into view indicating you can view the profile.

The issue

The gradient does not honor the bounds of the border radius. I tried this answer but when I do that, the linear gradient will not transition. @Keyframe animation doesn't help either.

Any ideas?

Edit

This appears to be an issue only with Chrome on Windows

回答1:

As far I can test the problem is related to the <a> container of your gradient layer. Searching about how to solve this issue here are some properties you can add that will cover most browsers:

will-change & transform:translate3d

Add this to your code:

.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

---

_{Note: Info adapted from this answer, 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.}

来源：https://stackoverflow.com/questions/43281046/css-transition-with-border-radius-and-linear-gradient