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

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

Raw

gistfile1.css

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

kevintruby commented Nov 4, 2017

You are a wonderful person. I've seen so many posts recommending the transform: perspective(); solution for this weird bug (mine is coupled with the GSAP animation library), and no matter where I use it or what pixels set, my overflow content would be visible.

It took me hours to use the right search term bringing me to your post, but I need to thank you from the bottom of my heart for this!

Not sure if this matters much for your solution, but I found that I still needed the perspective to apply on the wrapper using this trick.

kolinw commented Jan 11, 2018

❤️

Rendalf commented Jan 23, 2018

❤️

sarahmb83 commented Jan 23, 2018

❤️

jzhang300 commented Jan 25, 2018

❤️

dargue3 commented Feb 3, 2018

❤️

milewski commented Feb 14, 2018

❤️

angusfretwell commented Feb 15, 2018

🖤

yordanoff commented Feb 22, 2018 •

edited

❤️

-webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -webkit-transform: translate3d(0, 0, 0);
 -moz-transform: translate3d(0, 0, 0);

on the element with overflow also works and it doesn't break the elements box-shadow, if any is applied

Source: https://stackoverflow.com/questions/14383632/webkit-border-radius-and-overflow-bug-when-using-any-animation-transition/16681137

cbazureau commented Feb 27, 2018

❤️

andrewrubin commented Mar 8, 2018

Amazing, thank you.

nagman commented Mar 22, 2018

❤️❤️❤️
You just saved me an hour of painful debugging!

zoexiong commented Mar 27, 2018

❤️

valish commented Mar 27, 2018

❤️

tecbeast42 commented Apr 5, 2018 •

edited

❤️

victor-ca commented Apr 19, 2018

❤️

ghost commented Apr 25, 2018

❤️

sergiu-radu commented May 2, 2018

Thank you! This is the only one method that worked for me!

ondrakoupil commented May 4, 2018

Wonderful. I love ultra simple one-line fixes like this.

shocknawe commented May 23, 2018

nice!

dmfrancisco commented May 25, 2018

❤️

PeterMain commented May 29, 2018

❤️

raphaelrk commented Jun 1, 2018

❤️thank you so much!

fi3ework commented Jun 6, 2018

❤️why does it works...

renatodeleao commented Jun 6, 2018

❤️

metric152 commented Jun 8, 2018

This is perfect.
Thanks for the fix.

whirly77cai commented Jun 22, 2018

❤️

fabrizio-bianchi commented Jul 2, 2018

You made my day! Thanks!

karliszarins commented Jul 5, 2018

❤️

humayunkabir commented Jul 5, 2018

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

SergioLMacia commented Jul 17, 2018

❤️❤️ thank you so much

rakesh-makluri commented Jul 25, 2018

❤️ Thank you. It worked like a charm.

SoleauSimon commented Jul 27, 2018

❤️

nataliawww commented Jul 30, 2018

❤️

hiyangguo commented Aug 4, 2018

❤️

francescogior commented Aug 8, 2018

😍

shivamsupr commented Aug 9, 2018

❤️❤️❤️

essejmclean commented Aug 9, 2018

❤️

sprokusk commented Aug 14, 2018

❤️ thank you...thank you

sstenn commented Aug 15, 2018

You made my day! Thanks!

But why does it work?

Phunkhouse commented Aug 20, 2018

Thank you.

Yezily commented Aug 27, 2018

❤️

wichertandre commented Aug 27, 2018

❤️

amje commented Aug 30, 2018

❤️

katou0723 commented Sep 1, 2018

❤️

rainfore commented Sep 5, 2018

❤️

CheapeOne commented Sep 5, 2018

❤️

Mteuahasan commented Sep 7, 2018

❤️

kdharma commented Sep 23, 2018

❤️ thank you for this

nikolamarkelov commented Oct 4, 2018 •

edited

❤️ thank you!!!

patrickheng commented Oct 9, 2018

❤️❤️❤️

lorenzo-gasperoni commented Oct 16, 2018

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

availit commented Oct 23, 2018

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

dedalx commented Oct 26, 2018

❤️

kazoo0217 commented Oct 28, 2018

❤️

verymuch commented Nov 4, 2018

❤️ thank you

iyakd commented Nov 7, 2018 •

edited

❤️

ewhicher commented Nov 9, 2018

you have my ❤️

bofft commented Nov 14, 2018

❤️

jamcoupe commented Nov 23, 2018

❤️

tom76kimo commented Dec 5, 2018

❤️

ifthenelse commented Dec 14, 2018 •

edited

❤️ thank you!
I combined webkit-mask-image with backface-visibility to remove the tiny border around HTML5 videos in Chrome, Safari and Firefox on iOS:

video {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
}

daco commented Dec 18, 2018

❤️

chrisli30 commented Dec 24, 2018

Thank you!

sashangty commented Dec 28, 2018

Thank you!!

lesvauriens commented Jan 13, 2019

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

nikilok commented Jan 17, 2019

❤️ ❤️

eggxman commented Jan 21, 2019

❤️

schnurbert commented Jan 24, 2019

thank you so sehr!

MatHackDev commented Jan 29, 2019

❤️

marco-van-zomeren commented Feb 2, 2019

❤️Wow, why does this work ^^, thanks!

samholguin commented Feb 6, 2019

Nailed it

alexisbertin commented Feb 7, 2019

❤️ Someone give that person a cookie.

calebsyple commented Feb 8, 2019

❤

james2406 commented Feb 18, 2019

❤️

kloshar4o commented Feb 19, 2019

❤️

narrowdesign commented Feb 21, 2019 •

edited

will-change: transform; on the container alongside the overflow: hidden; also works

fra-smw commented Feb 22, 2019

you save my day, thank you sooo much ❤️

artsmolin commented Feb 25, 2019

❤️

kogal commented Feb 28, 2019

Thank you!

xApep commented Feb 28, 2019

❤️

antonramha commented Mar 4, 2019

thank you <3

simeyla commented Mar 11, 2019

@narrowdesign wow that works great :-) I have a box-shadow and this seems the easiest way.

1forh commented Mar 12, 2019

❤️

yangyichen commented Mar 22, 2019

❤️works for me

asafbge commented Mar 25, 2019

❤️

deje1011 commented Mar 26, 2019

Thank you!

isNeilLin commented Apr 4, 2019

❤️

Enigama commented Apr 12, 2019

❤️❤️❤️

Senior-Fin commented Apr 18, 2019

@ayamflow, @yordanoff You helped me SOOOO much! ❤️❤️❤️❤️❤️❤️❤️❤️❤️

sveta4acova commented Apr 19, 2019

❤️

jqweryjson commented Apr 25, 2019

@❤️❤️❤️

sg-mamedova commented Apr 26, 2019

❤️thank you!

BroFox86 commented May 1, 2019

Thank you! ❤️

sharontrdjmn commented May 3, 2019

❤️

RickStanley commented May 6, 2019

❤️

lazd commented May 7, 2019 •

edited

This can be fixed by creating a new stacking context on the outer element with the overflow. Something as simple as position: relative; z-index: 1.

mrtwinkler commented May 10, 2019

❤️

vienthuong commented May 21, 2019

mkeremkoc commented May 23, 2019

I spent 2 hours!!! c'mon!! ❤️

soviac commented May 29, 2019

Perfection! Thank you!

javierlopeza commented May 30, 2019

❤️

sweettimes commented Jun 4, 2019

OMG, how do you know that, awesomeee
❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️

titoasty commented Jun 7, 2019

❤️ is it love?

LeonidasEsteban commented Jun 14, 2019

❤️

likeavenus commented Jun 19, 2019

❤️

onuro commented Jun 21, 2019

I LOVE YOU!
❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️

zlsa commented Jun 22, 2019

❤️

RPeraltaJr commented Jun 24, 2019

❤️

vanthinhit310 commented Jun 27, 2019

thank you very much

vanthinhit310 commented Jun 27, 2019

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

nrwinner commented Jun 29, 2019

theFreedomBanana commented Jul 1, 2019

❤️

johnozbay commented Jul 11, 2019

❤️

Gyanreyer commented Jul 15, 2019

❤️

awdebruijn commented Jul 19, 2019

❤️very nice, thank you!

dmarchuk commented Jul 24, 2019

❤️

dbribe commented Jul 26, 2019

Finding this didn't take that long, but ❤️

alexzoul commented Jul 26, 2019

❤️

Dexdot commented Aug 2, 2019

❤️

ayaka209 commented Aug 3, 2019

really thank you

EminQasimov commented Aug 18, 2019

❤️

gordonnl commented Aug 23, 2019

Safari lets us down, but you... you bring us back up. ❤️

Nitraatss commented Aug 29, 2019

❤️

der-Lehmann commented Aug 29, 2019

Thanks a lot!

dlp-fantasia commented Sep 4, 2019

❤️

raymondjacobson commented Sep 4, 2019 •

edited

❤️

janko1984 commented Sep 6, 2019

<3

Rijk commented Sep 12, 2019

❤️

axelferdinand commented Sep 13, 2019

<3

Ciyou commented Sep 16, 2019

will-change: transform;

❤️
Thank you sooooooo much! You saved my day!

gnklv commented Sep 17, 2019

Good job. Thanks a lot!

nsinotov commented Sep 20, 2019

❤️

yucolabjames commented Sep 24, 2019 •

edited

Confirm, nothing else worked, except:
-webkit-mask-image: -webkit-radial-gradient(white, black);

Thanks OP!

matyas-igor commented Sep 26, 2019

❤️

pscamman commented Oct 1, 2019

❤️

BastienTeissier commented Oct 3, 2019

❤️

derwaldgeist commented Oct 5, 2019

You made my day. Thanks a lot for this hack.

❤️

brett-k commented Oct 8, 2019

❤

bnlokash commented Oct 10, 2019

❤❤❤❤❤

Lysindr commented Oct 15, 2019

THANK'S YOU, A GOOD MAN ❤❤❤

MarkHTML commented Oct 21, 2019

Your awesome ❤❤❤❤❤❤

ktfhaupt commented Oct 22, 2019

<3

influvio commented Oct 23, 2019

😘

jfammler commented Oct 25, 2019

❤️

Applelo commented Oct 25, 2019

💘

jsibelman commented Oct 26, 2019

❤️

Domvel commented Oct 28, 2019

This is also a Chrome bug. Since the last update of Chrome on Android. The version 78. Not all devices. Maybe there are hardware driver changes. I tested the older Chrome version e.g. v65 and last week below 78 and it works. Since 78 this is a bug. -.- Argh... this is annoying. But thanks for the workaround. It works for this moment and case. ...

nt9142 commented Oct 31, 2019

❤️

tomdalling commented Oct 31, 2019

❤️

ponny commented Oct 31, 2019

❤️

awwafe commented Oct 31, 2019

❤️

nskazki commented Nov 1, 2019

❤️

kolyasapphire commented Nov 4, 2019

❤️

thibka commented Nov 8, 2019

❤️

IagoLast commented Nov 14, 2019

❤️

sarahcaixeta commented Nov 14, 2019

❤️

Ore4444 commented Nov 18, 2019

will-change: transform; on the container alongside the overflow: hidden; also works

❤️

koole commented Nov 28, 2019

❤️

alexanderjuhlbendt commented Nov 29, 2019

❤️

bobmoff commented Nov 29, 2019

😍

krim commented Nov 30, 2019

thanks) ❤️

sumanengbd commented Dec 4, 2019

❤️
-webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -webkit-transform: translate3d(0, 0, 0);
 -moz-transform: translate3d(0, 0, 0);
on the element with overflow also works and it doesn't break the elements box-shadow, if any is applied

Source: https://stackoverflow.com/questions/14383632/webkit-border-radius-and-overflow-bug-when-using-any-animation-transition/16681137

Working ❤️

krutoo commented Dec 7, 2019

❤️❤️❤️❤️❤️

ivancis commented Dec 19, 2019

❤️

p2yang commented Dec 20, 2019

❤️

AshkanLaei commented Dec 23, 2019

Thanks a lot!
❤

laurosilvacom commented Dec 30, 2019

❤️

eriklindgren commented Jan 9, 2020

❤️

RodolfoGS commented Jan 15, 2020

will-change: transform; on the container alongside the overflow: hidden; also works

Working box-shadow + border-radius ❤️

PaulTime commented Jan 30, 2020

❤️

matuella commented Feb 2, 2020

❤️

PiotrPolcik commented Feb 3, 2020

❤️

jmayergit commented Feb 4, 2020

❤️

ToishY commented Feb 6, 2020

❤️

uto-usui commented Feb 11, 2020

❤️🐈

nathanielmaeus commented Feb 14, 2020

❤️

edgargressie commented Feb 18, 2020

This can be fixed by creating a new stacking context on the outer element with the overflow. Something as simple as position: relative; z-index: 1.

❤️

jisdote commented Feb 19, 2020

❤️

rikjacobs1390 commented Feb 20, 2020

❤️

piaaaac commented Feb 20, 2020

<3

colepeters commented Feb 20, 2020

🖤

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

You can’t perform that action at this time.