ayamflow/gist:b602ab436ac9f05660d9c15190f4fd7b

Created May 9, 2016 19:10

Star (446) You must be signed in to star a gist
Fork (23) You must be signed in to fork a gist

Select an option

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b.js"></script>
Save ayamflow/b602ab436ac9f05660d9c15190f4fd7b to your computer and use it in GitHub Desktop.

Download ZIP

Safari border-radius + overflow: hidden + CSS transform fix

Raw

gistfile1.css

	// Add on element with overflow
	-webkit-mask-image: -webkit-radial-gradient(white, black);

sjbur commented Jun 25, 2022

❤️

DevinXian commented Jul 21, 2022

thanks!

fishnyc22 commented Aug 18, 2022

You sir, are like a wizard. Thank you.

DanielYankiver commented Sep 12, 2022

Works, great. Thank you!

satonin12 commented Sep 20, 2022

Working, thank you 🥇

leclercma commented Sep 22, 2022

❤️‍🔥

Ulysseee commented Sep 23, 2022

thank's a lot it works perfectly fine, blows my mind

AmalJossy commented Sep 28, 2022

Doesn't completely solve the problem but it's less noticeable now. Thanks ❤️

JoelEadeDesign commented Oct 18, 2022

xoxoxoxo

ihyperstorm commented Nov 3, 2022

Thx sir! I think what I doing wrong

kyrregjerstad commented Dec 16, 2022

Thanks, this issue was driving me crazy!

TobiasLauer commented Dec 21, 2022

❤️

MarcelKnobelsdorf commented Dec 21, 2022

❤️

christian-reichart commented Dec 22, 2022

❤️

Just-Hosam commented Dec 23, 2022

❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️

CodyWatters commented Jan 5, 2023

❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️
❤️💙💙💙💙💙❤️❤️💙❤️❤️❤️💙❤️
❤️❤️❤️💙❤️❤️❤️❤️❤️💙❤️💙❤️❤️
❤️❤️❤️💙❤️❤️❤️❤️❤️❤️💙❤️❤️❤️
❤️❤️❤️💙❤️❤️❤️❤️❤️💙❤️❤️❤️❤️
❤️❤️❤️💙❤️❤️❤️❤️💙❤️❤️❤️❤️❤️
❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️

ignmandagaran commented Jan 19, 2023

❤️❤️❤️❤️

thiagorossener commented Jan 19, 2023

❤️

edwinork commented Jan 22, 2023

🙏

lukejans commented Jan 29, 2023

this solution seems to help to a degree. It makes the line slightly thinner but I'm still seeing a border with overflow hidden.

div {
  position:relative;
  width:200;
  height:200;
  background: #781728;
  border-radius: 100%;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(#6CB3A9, #6CB3A9);
  top:40;
  left:90}

aliemre commented Feb 3, 2023

Awesome!

isaacs commented Feb 10, 2023

Thanks!

hyposlasher commented Feb 28, 2023

❤️

fgd007 commented Mar 23, 2023

How can I buy you a beer!?

Konglomneshued commented Jul 9, 2023

Thank you! Also works for me in Chrome.

umar-ibn-shafee commented Aug 25, 2023

Thanks a lot man...

l-portet commented Aug 25, 2023

Not all heroes wear capes

thebazel commented Sep 25, 2023 •

edited

Loading

isolation: isolate; fixes this issue. isolation property works in all browsers.
Demo: https://codepen.io/thebazel/pen/NWeYgRm

davelavoie commented Jul 11, 2024

We're in July 2024 and this is still the only solution that worked for me.. Thank you!

tzachyrm commented Aug 13, 2024

isolation: isolate; worked for me. Thanks! ❤️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment