Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Safari border-radius + overflow: hidden + CSS transform fix
// Add on element with overflow
-webkit-mask-image: -webkit-radial-gradient(white, black);
@kevintruby

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

kolinw commented Jan 11, 2018

❤️

@Rendalf

This comment has been minimized.

Copy link

Rendalf commented Jan 23, 2018

❤️

@sarahmb83

This comment has been minimized.

Copy link

sarahmb83 commented Jan 23, 2018

❤️

@jzhang300

This comment has been minimized.

Copy link

jzhang300 commented Jan 25, 2018

❤️

@dargue3

This comment has been minimized.

Copy link

dargue3 commented Feb 3, 2018

❤️

@milewski

This comment has been minimized.

Copy link

milewski commented Feb 14, 2018

❤️

@angusfretwell

This comment has been minimized.

Copy link

angusfretwell commented Feb 15, 2018

🖤

@yordanoff

This comment has been minimized.

Copy link

yordanoff commented Feb 22, 2018

❤️

-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

This comment has been minimized.

Copy link

cbazureau commented Feb 27, 2018

❤️

@andrewrubin

This comment has been minimized.

Copy link

andrewrubin commented Mar 8, 2018

Amazing, thank you.

@nagman

This comment has been minimized.

Copy link

nagman commented Mar 22, 2018

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

@zoexiong

This comment has been minimized.

Copy link

zoexiong commented Mar 27, 2018

❤️

@valish

This comment has been minimized.

Copy link

valish commented Mar 27, 2018

❤️

@tecbeast42

This comment has been minimized.

Copy link

tecbeast42 commented Apr 5, 2018

❤️

@victor-ca

This comment has been minimized.

Copy link

victor-ca commented Apr 19, 2018

❤️

@ghost

This comment has been minimized.

Copy link

ghost commented Apr 25, 2018

❤️

@sergiu-radu

This comment has been minimized.

Copy link

sergiu-radu commented May 2, 2018

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

@ondrakoupil

This comment has been minimized.

Copy link

ondrakoupil commented May 4, 2018

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

@shocknawe

This comment has been minimized.

Copy link

shocknawe commented May 23, 2018

nice!

@dmfrancisco

This comment has been minimized.

Copy link

dmfrancisco commented May 25, 2018

❤️

@PeterMain

This comment has been minimized.

Copy link

PeterMain commented May 29, 2018

❤️

@raphaelrk

This comment has been minimized.

Copy link

raphaelrk commented Jun 1, 2018

❤️thank you so much!

@fi3ework

This comment has been minimized.

Copy link

fi3ework commented Jun 6, 2018

❤️why does it works...

@renatodeleao

This comment has been minimized.

Copy link

renatodeleao commented Jun 6, 2018

❤️

@metric152

This comment has been minimized.

Copy link

metric152 commented Jun 8, 2018

This is perfect.
Thanks for the fix.

@whirly77cai

This comment has been minimized.

Copy link

whirly77cai commented Jun 22, 2018

❤️

@fabrizio-bianchi

This comment has been minimized.

Copy link

fabrizio-bianchi commented Jul 2, 2018

You made my day! Thanks!

@karliszarins

This comment has been minimized.

Copy link

karliszarins commented Jul 5, 2018

❤️

@humayunkabir

This comment has been minimized.

Copy link

humayunkabir commented Jul 5, 2018

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

@SergioLMacia

This comment has been minimized.

Copy link

SergioLMacia commented Jul 17, 2018

❤️❤️ thank you so much

@rakesh-makluri

This comment has been minimized.

Copy link

rakesh-makluri commented Jul 25, 2018

❤️ Thank you. It worked like a charm.

@SoleauSimon

This comment has been minimized.

Copy link

SoleauSimon commented Jul 27, 2018

❤️

@nataliawww

This comment has been minimized.

Copy link

nataliawww commented Jul 30, 2018

❤️

@hiyangguo

This comment has been minimized.

Copy link

hiyangguo commented Aug 4, 2018

❤️

@francescogior

This comment has been minimized.

Copy link

francescogior commented Aug 8, 2018

😍

@shivamsupr

This comment has been minimized.

Copy link

shivamsupr commented Aug 9, 2018

❤️❤️❤️

@essejmclean

This comment has been minimized.

Copy link

essejmclean commented Aug 9, 2018

❤️

@sprokusk

This comment has been minimized.

Copy link

sprokusk commented Aug 14, 2018

❤️ thank you...thank you

@sstenn

This comment has been minimized.

Copy link

sstenn commented Aug 15, 2018

You made my day! Thanks!

But why does it work?

@Phunkhouse

This comment has been minimized.

Copy link

Phunkhouse commented Aug 20, 2018

Thank you.

@Yezily

This comment has been minimized.

Copy link

Yezily commented Aug 27, 2018

❤️

@wichertandre

This comment has been minimized.

Copy link

wichertandre commented Aug 27, 2018

❤️

@amje

This comment has been minimized.

Copy link

amje commented Aug 30, 2018

❤️

@katou0723

This comment has been minimized.

Copy link

katou0723 commented Sep 1, 2018

❤️

@rainfore

This comment has been minimized.

Copy link

rainfore commented Sep 5, 2018

❤️

@CheapeOne

This comment has been minimized.

Copy link

CheapeOne commented Sep 5, 2018

❤️

@Mteuahasan

This comment has been minimized.

Copy link

Mteuahasan commented Sep 7, 2018

❤️

@kdharma

This comment has been minimized.

Copy link

kdharma commented Sep 23, 2018

❤️ thank you for this

@nikolamarkelov

This comment has been minimized.

Copy link

nikolamarkelov commented Oct 4, 2018

❤️ thank you!!!

@patrickheng

This comment has been minimized.

Copy link

patrickheng commented Oct 9, 2018

❤️❤️❤️

@lorenzo-gasperoni

This comment has been minimized.

Copy link

lorenzo-gasperoni commented Oct 16, 2018

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

@availit

This comment has been minimized.

Copy link

availit commented Oct 23, 2018

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

@dedalx

This comment has been minimized.

Copy link

dedalx commented Oct 26, 2018

❤️

@kazoo0217

This comment has been minimized.

Copy link

kazoo0217 commented Oct 28, 2018

❤️

@verymuch

This comment has been minimized.

Copy link

verymuch commented Nov 4, 2018

❤️ thank you

@iyakd

This comment has been minimized.

Copy link

iyakd commented Nov 7, 2018

❤️

@ewhicher

This comment has been minimized.

Copy link

ewhicher commented Nov 9, 2018

you have my ❤️

@bofft

This comment has been minimized.

Copy link

bofft commented Nov 14, 2018

❤️

@jamcoupe

This comment has been minimized.

Copy link

jamcoupe commented Nov 23, 2018

❤️

@tom76kimo

This comment has been minimized.

Copy link

tom76kimo commented Dec 5, 2018

❤️

@ifthenelse

This comment has been minimized.

Copy link

ifthenelse commented Dec 14, 2018

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

This comment has been minimized.

Copy link

daco commented Dec 18, 2018

❤️

@chrisli30

This comment has been minimized.

Copy link

chrisli30 commented Dec 24, 2018

Thank you!

@sashangty

This comment has been minimized.

Copy link

sashangty commented Dec 28, 2018

Thank you!!

@lesvauriens

This comment has been minimized.

Copy link

lesvauriens commented Jan 13, 2019

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

@nikilok

This comment has been minimized.

Copy link

nikilok commented Jan 17, 2019

❤️ ❤️

@eggxman

This comment has been minimized.

Copy link

eggxman commented Jan 21, 2019

❤️

@schnurbert

This comment has been minimized.

Copy link

schnurbert commented Jan 24, 2019

thank you so sehr!

@MatHackDev

This comment has been minimized.

Copy link

MatHackDev commented Jan 29, 2019

❤️

@marco-van-zomeren

This comment has been minimized.

Copy link

marco-van-zomeren commented Feb 2, 2019

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

@samholguin

This comment has been minimized.

Copy link

samholguin commented Feb 6, 2019

Nailed it

@alexisbertin

This comment has been minimized.

Copy link

alexisbertin commented Feb 7, 2019

❤️ Someone give that person a cookie.

@calebsyple

This comment has been minimized.

Copy link

calebsyple commented Feb 8, 2019

@james2406

This comment has been minimized.

Copy link

james2406 commented Feb 18, 2019

❤️

@kloshar4o

This comment has been minimized.

Copy link

kloshar4o commented Feb 19, 2019

❤️

@narrowdesign

This comment has been minimized.

Copy link

narrowdesign commented Feb 21, 2019

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

@fra-smw

This comment has been minimized.

Copy link

fra-smw commented Feb 22, 2019

you save my day, thank you sooo much ❤️

@artsmolin

This comment has been minimized.

Copy link

artsmolin commented Feb 25, 2019

❤️

@kogal

This comment has been minimized.

Copy link

kogal commented Feb 28, 2019

Thank you!

@xApep

This comment has been minimized.

Copy link

xApep commented Feb 28, 2019

❤️

@antonramha

This comment has been minimized.

Copy link

antonramha commented Mar 4, 2019

thank you <3

@simeyla

This comment has been minimized.

Copy link

simeyla commented Mar 11, 2019

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

@1forh

This comment has been minimized.

Copy link

1forh commented Mar 12, 2019

❤️

@yangyichen

This comment has been minimized.

Copy link

yangyichen commented Mar 22, 2019

❤️works for me

@asafbge

This comment has been minimized.

Copy link

asafbge commented Mar 25, 2019

❤️

@deje1011

This comment has been minimized.

Copy link

deje1011 commented Mar 26, 2019

Thank you!

@isNeilLin

This comment has been minimized.

Copy link

isNeilLin commented Apr 4, 2019

❤️

@Enigama

This comment has been minimized.

Copy link

Enigama commented Apr 12, 2019

❤️❤️❤️

@Senior-Fin

This comment has been minimized.

Copy link

Senior-Fin commented Apr 18, 2019

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

@sveta4acova

This comment has been minimized.

Copy link

sveta4acova commented Apr 19, 2019

❤️

@jqweryjson

This comment has been minimized.

Copy link

jqweryjson commented Apr 25, 2019

@❤️❤️❤️

@sg-mamedova

This comment has been minimized.

Copy link

sg-mamedova commented Apr 26, 2019

❤️thank you!

@BroFox86

This comment has been minimized.

Copy link

BroFox86 commented May 1, 2019

Thank you! ❤️

@sharontrdjmn

This comment has been minimized.

Copy link

sharontrdjmn commented May 3, 2019

❤️

@RickStanley

This comment has been minimized.

Copy link

RickStanley commented May 6, 2019

❤️

@lazd

This comment has been minimized.

Copy link

lazd commented May 7, 2019

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

This comment has been minimized.

Copy link

mrtwinkler commented May 10, 2019

❤️

@vienthuong

This comment has been minimized.

Copy link

vienthuong commented May 21, 2019

image

@mkeremkoc

This comment has been minimized.

Copy link

mkeremkoc commented May 23, 2019

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

@soviac

This comment has been minimized.

Copy link

soviac commented May 29, 2019

Perfection! Thank you!

@javierlopeza

This comment has been minimized.

Copy link

javierlopeza commented May 30, 2019

❤️

@sweettimes

This comment has been minimized.

Copy link

sweettimes commented Jun 4, 2019

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

@titoasty

This comment has been minimized.

Copy link

titoasty commented Jun 7, 2019

❤️ is it love?

@LeonidasEsteban

This comment has been minimized.

Copy link

LeonidasEsteban commented Jun 14, 2019

❤️

@likeavenus

This comment has been minimized.

Copy link

likeavenus commented Jun 19, 2019

❤️

@onuro

This comment has been minimized.

Copy link

onuro commented Jun 21, 2019

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

@zlsa

This comment has been minimized.

Copy link

zlsa commented Jun 22, 2019

❤️

@RPeraltaJr

This comment has been minimized.

Copy link

RPeraltaJr commented Jun 24, 2019

❤️

@vanthinhit310

This comment has been minimized.

Copy link

vanthinhit310 commented Jun 27, 2019

thank you very much

@vanthinhit310

This comment has been minimized.

Copy link

vanthinhit310 commented Jun 27, 2019

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

@nrwinner

This comment has been minimized.

Copy link

nrwinner commented Jun 29, 2019

image

@theFreedomBanana

This comment has been minimized.

Copy link

theFreedomBanana commented Jul 1, 2019

❤️

@johnozbay

This comment has been minimized.

Copy link

johnozbay commented Jul 11, 2019

❤️

@Gyanreyer

This comment has been minimized.

Copy link

Gyanreyer commented Jul 15, 2019

❤️

@awdebruijn

This comment has been minimized.

Copy link

awdebruijn commented Jul 19, 2019

❤️very nice, thank you!

@dmarchuk

This comment has been minimized.

Copy link

dmarchuk commented Jul 24, 2019

❤️

@dbribe

This comment has been minimized.

Copy link

dbribe commented Jul 26, 2019

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

@alexzoul

This comment has been minimized.

Copy link

alexzoul commented Jul 26, 2019

❤️

@Dexdot

This comment has been minimized.

Copy link

Dexdot commented Aug 2, 2019

❤️

@ayaka209

This comment has been minimized.

Copy link

ayaka209 commented Aug 3, 2019

really thank you

@EminQasimov

This comment has been minimized.

Copy link

EminQasimov commented Aug 18, 2019

❤️

@gordonnl

This comment has been minimized.

Copy link

gordonnl commented Aug 23, 2019

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

@Nitraatss

This comment has been minimized.

Copy link

Nitraatss commented Aug 29, 2019

❤️

@der-Lehmann

This comment has been minimized.

Copy link

der-Lehmann commented Aug 29, 2019

Thanks a lot!

@dlp-fantasia

This comment has been minimized.

Copy link

dlp-fantasia commented Sep 4, 2019

❤️

@raymondjacobson

This comment has been minimized.

Copy link

raymondjacobson commented Sep 4, 2019

❤️

@janko1984

This comment has been minimized.

Copy link

janko1984 commented Sep 6, 2019

<3

@Rijk

This comment has been minimized.

Copy link

Rijk commented Sep 12, 2019

❤️

@axelferdinand

This comment has been minimized.

Copy link

axelferdinand commented Sep 13, 2019

<3

@Ciyou

This comment has been minimized.

Copy link

Ciyou commented Sep 16, 2019

will-change: transform;

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

@gnklv

This comment has been minimized.

Copy link

gnklv commented Sep 17, 2019

Good job. Thanks a lot!

@frmassar

This comment has been minimized.

Copy link

frmassar commented Sep 20, 2019

Thank you so much!!!!

@nsinotov

This comment has been minimized.

Copy link

nsinotov commented Sep 20, 2019

❤️

@yucolabjames

This comment has been minimized.

Copy link

yucolabjames commented Sep 24, 2019

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

Thanks OP!

@matyas-igor

This comment has been minimized.

Copy link

matyas-igor commented Sep 26, 2019

❤️

@pscamman

This comment has been minimized.

Copy link

pscamman commented Oct 1, 2019

❤️

@BastienTeissier

This comment has been minimized.

Copy link

BastienTeissier commented Oct 3, 2019

❤️

@derwaldgeist

This comment has been minimized.

Copy link

derwaldgeist commented Oct 5, 2019

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

❤️

@brett-k

This comment has been minimized.

Copy link

brett-k commented Oct 8, 2019

@bnlokash

This comment has been minimized.

Copy link

bnlokash commented Oct 10, 2019

❤❤❤❤❤

@Lysindr

This comment has been minimized.

Copy link

Lysindr commented Oct 15, 2019

THANK'S YOU, A GOOD MAN ❤❤❤

@MarkHTML

This comment has been minimized.

Copy link

MarkHTML commented Oct 21, 2019

Your awesome ❤❤❤❤❤❤

@ktfhaupt

This comment has been minimized.

Copy link

ktfhaupt commented Oct 22, 2019

<3

@influvio

This comment has been minimized.

Copy link

influvio commented Oct 23, 2019

 😘

@jfammler

This comment has been minimized.

Copy link

jfammler commented Oct 25, 2019

❤️

@Applelo

This comment has been minimized.

Copy link

Applelo commented Oct 25, 2019

💘

@jsibelman

This comment has been minimized.

Copy link

jsibelman commented Oct 26, 2019

❤️

@Domvel

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

nt9142 commented Oct 31, 2019

❤️

@tomdalling

This comment has been minimized.

Copy link

tomdalling commented Oct 31, 2019

❤️

@ponny

This comment has been minimized.

Copy link

ponny commented Oct 31, 2019

❤️

@awwafe

This comment has been minimized.

Copy link

awwafe commented Oct 31, 2019

❤️

@nskazki

This comment has been minimized.

Copy link

nskazki commented Nov 1, 2019

❤️

@kolyasapphire

This comment has been minimized.

Copy link

kolyasapphire commented Nov 4, 2019

❤️

@thibka

This comment has been minimized.

Copy link

thibka commented Nov 8, 2019

❤️

@IagoLast

This comment has been minimized.

Copy link

IagoLast commented Nov 14, 2019

❤️

@sarahcaixeta

This comment has been minimized.

Copy link

sarahcaixeta commented Nov 14, 2019

❤️

@Ore4444

This comment has been minimized.

Copy link

Ore4444 commented Nov 18, 2019

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

❤️

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.