CSS transition with border radius and linear gradient

Question

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

<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 cropped by the radius of the border ( profile-pic-wrapper ). The desired behavior is to have a profile image, when the image container is rounded, a linear gradient is visible, indicating that you can view the profile.

Problem

Gradient does not respect the borders of the border radius. I tried this answer , but when I do this, the linear gradient will not cross. The @Keyframe animation does not help.

Any ideas?

Edit

This seems to be the only issue with Chrome on Windows

Answer 1

As far as I can check, the problem is with the <a> container of your gradient layer. Searching on how to solve this problem, here are some properties that you can add that most browsers will cover:

will-change and 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: The information adapted from this answer , I want to publish my answer here according to your case, which you need to do is by tag and parent tag, but if you want, we can close it as dup.}