Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save ayamflow/b602ab436ac9f05660d9c15190f4fd7b to your computer and use it in GitHub Desktop.
Save ayamflow/b602ab436ac9f05660d9c15190f4fd7b to your computer and use it in GitHub Desktop.
Safari border-radius + overflow: hidden + CSS transform fix
// Add on element with overflow
-webkit-mask-image: -webkit-radial-gradient(white, black);
@ag-coder
Copy link

🙏🏻

@gioedge
Copy link

gioedge commented Nov 17, 2021

<3

@pandaTerminator
Copy link

❤️

@nazarmiller
Copy link

=*

@asmalcev
Copy link

asmalcev commented Dec 1, 2021

♥♥♥♥♥♥♥♥♥♥♥♥

@ekhasanov
Copy link

You saved my day! ❤️

@dunice
Copy link

dunice commented Dec 2, 2021

❤️

@phamminhduc209
Copy link

♥♥♥♥♥♥♥♥♥♥♥♥

@ml350
Copy link

ml350 commented Dec 9, 2021

❤️

@ahmadajmi
Copy link

Thank you!

@rahulsuresh-git
Copy link

❤️

@nitin7dc
Copy link

nitin7dc commented Jan 20, 2022

❤️

@bitcente
Copy link

❤️

@FinnMal
Copy link

FinnMal commented Feb 2, 2022

Thanks!

@julianbenegas
Copy link

❤️

@cheestudio
Copy link

@elvinn thanks for the explanation. I was able to just use the position:relative approach, which is much cleaner. I really appreciate the explanation, too. Now the fix makes all the sense in the world.

Still, stupid Safari is the only browser that needs this fix in the first place.

@FerFuego
Copy link

FerFuego commented Mar 7, 2022

The Best!

@NobleTruths
Copy link

This solved the problem I've been struggling with for the past few hours. Thank you!

@surenshanaka
Copy link

Legend!

@enBonnet
Copy link

enBonnet commented Jun 2, 2022

OMG! Thank you!

@saulosilverio
Copy link

Thanks! :)

@chetansanghani
Copy link

Thanks

@sjbur
Copy link

sjbur commented Jun 25, 2022

❤️

@DevinXian
Copy link

thanks!

@fishnyc22
Copy link

You sir, are like a wizard. Thank you.

@DanielYankiver
Copy link

Works, great. Thank you!

@satonin12
Copy link

Working, thank you 🥇

@leclercma
Copy link

❤️‍🔥

@Ulysseee
Copy link

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

@AmalJossy
Copy link

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

@JoelEadeDesign
Copy link

xoxoxoxo

@flyneex
Copy link

flyneex commented Nov 3, 2022

Thx sir! I think what I doing wrong

@kyrregjerstad
Copy link

Thanks, this issue was driving me crazy!

@TobiasLauer
Copy link

❤️

@MarcelKnobelsdorf
Copy link

❤️

@christian-reichart
Copy link

❤️

@Just-Hosam
Copy link

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

@CodyWatters
Copy link

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

@ignmandagaran
Copy link

❤️❤️❤️❤️

@thiagorossener
Copy link

❤️

@edwinork
Copy link

🙏

@lukejans
Copy link

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

aliemre commented Feb 3, 2023

Awesome!

@isaacs
Copy link

isaacs commented Feb 10, 2023

Thanks!

@hyposlasher
Copy link

❤️

@fgd007
Copy link

fgd007 commented Mar 23, 2023

How can I buy you a beer!?

@Konglomneshued
Copy link

Thank you! Also works for me in Chrome.

@umar-ibn-shafee
Copy link

Thanks a lot man...

@l-portet
Copy link

Not all heroes wear capes

@thebazel
Copy link

thebazel commented Sep 25, 2023

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

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