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

❤️

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