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

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

commented Jan 11, 2018

❤️

@Rendalf

This comment has been minimized.

Copy link

commented Jan 23, 2018

❤️

@sarahmb83

This comment has been minimized.

Copy link

commented Jan 23, 2018

❤️

@jzhang300

This comment has been minimized.

Copy link

commented Jan 25, 2018

❤️

@dargue3

This comment has been minimized.

Copy link

commented Feb 3, 2018

❤️

@milewski

This comment has been minimized.

Copy link

commented Feb 14, 2018

❤️

@angusfretwell

This comment has been minimized.

Copy link

commented Feb 15, 2018

🖤

@yordanoff

This comment has been minimized.

Copy link

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

commented Feb 27, 2018

❤️

@andrewrubin

This comment has been minimized.

Copy link

commented Mar 8, 2018

Amazing, thank you.

@nagman

This comment has been minimized.

Copy link

commented Mar 22, 2018

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

@zoexiong

This comment has been minimized.

Copy link

commented Mar 27, 2018

❤️

@valish

This comment has been minimized.

Copy link

commented Mar 27, 2018

❤️

@tecbeast42

This comment has been minimized.

Copy link

commented Apr 5, 2018

❤️

@victor-ca

This comment has been minimized.

Copy link

commented Apr 19, 2018

❤️

@ghost

This comment has been minimized.

Copy link

commented Apr 25, 2018

❤️

@sergiu-radu

This comment has been minimized.

Copy link

commented May 2, 2018

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

@ondrakoupil

This comment has been minimized.

Copy link

commented May 4, 2018

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

@shocknawe

This comment has been minimized.

Copy link

commented May 23, 2018

nice!

@dmfrancisco

This comment has been minimized.

Copy link

commented May 25, 2018

❤️

@PeterMain

This comment has been minimized.

Copy link

commented May 29, 2018

❤️

@raphaelrk

This comment has been minimized.

Copy link

commented Jun 1, 2018

❤️thank you so much!

@fi3ework

This comment has been minimized.

Copy link

commented Jun 6, 2018

❤️why does it works...

@renatodeleao

This comment has been minimized.

Copy link

commented Jun 6, 2018

❤️

@metric152

This comment has been minimized.

Copy link

commented Jun 8, 2018

This is perfect.
Thanks for the fix.

@whirly77cai

This comment has been minimized.

Copy link

commented Jun 22, 2018

❤️

@fabrizio-bianchi

This comment has been minimized.

Copy link

commented Jul 2, 2018

You made my day! Thanks!

@karliszarins

This comment has been minimized.

Copy link

commented Jul 5, 2018

❤️

@humayunkabir

This comment has been minimized.

Copy link

commented Jul 5, 2018

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

@SergioLMacia

This comment has been minimized.

Copy link

commented Jul 17, 2018

❤️❤️ thank you so much

@rakesh-makluri

This comment has been minimized.

Copy link

commented Jul 25, 2018

❤️ Thank you. It worked like a charm.

@SoleauSimon

This comment has been minimized.

Copy link

commented Jul 27, 2018

❤️

@nataliawww

This comment has been minimized.

Copy link

commented Jul 30, 2018

❤️

@hiyangguo

This comment has been minimized.

Copy link

commented Aug 4, 2018

❤️

@francescogior

This comment has been minimized.

Copy link

commented Aug 8, 2018

😍

@shivamsupr

This comment has been minimized.

Copy link

commented Aug 9, 2018

❤️❤️❤️

@essejmclean

This comment has been minimized.

Copy link

commented Aug 9, 2018

❤️

@sprokusk

This comment has been minimized.

Copy link

commented Aug 14, 2018

❤️ thank you...thank you

@sstenn

This comment has been minimized.

Copy link

commented Aug 15, 2018

You made my day! Thanks!

But why does it work?

@Phunkhouse

This comment has been minimized.

Copy link

commented Aug 20, 2018

Thank you.

@Yezily

This comment has been minimized.

Copy link

commented Aug 27, 2018

❤️

@wichertandre

This comment has been minimized.

Copy link

commented Aug 27, 2018

❤️

@amje

This comment has been minimized.

Copy link

commented Aug 30, 2018

❤️

@katou0723

This comment has been minimized.

Copy link

commented Sep 1, 2018

❤️

@rainfore

This comment has been minimized.

Copy link

commented Sep 5, 2018

❤️

@CheapeOne

This comment has been minimized.

Copy link

commented Sep 5, 2018

❤️

@Mteuahasan

This comment has been minimized.

Copy link

commented Sep 7, 2018

❤️

@kdharma

This comment has been minimized.

Copy link

commented Sep 23, 2018

❤️ thank you for this

@nikolamarkelov

This comment has been minimized.

Copy link

commented Oct 4, 2018

❤️ thank you!!!

@patrickheng

This comment has been minimized.

Copy link

commented Oct 9, 2018

❤️❤️❤️

@lorenzo-gasperoni

This comment has been minimized.

Copy link

commented Oct 16, 2018

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

@availit

This comment has been minimized.

Copy link

commented Oct 23, 2018

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

@dedalx

This comment has been minimized.

Copy link

commented Oct 26, 2018

❤️

@kazoo0217

This comment has been minimized.

Copy link

commented Oct 28, 2018

❤️

@verymuch

This comment has been minimized.

Copy link

commented Nov 4, 2018

❤️ thank you

@iyakd

This comment has been minimized.

Copy link

commented Nov 7, 2018

❤️

@ewhicher

This comment has been minimized.

Copy link

commented Nov 9, 2018

you have my ❤️

@bofft

This comment has been minimized.

Copy link

commented Nov 14, 2018

❤️

@jamcoupe

This comment has been minimized.

Copy link

commented Nov 23, 2018

❤️

@tom76kimo

This comment has been minimized.

Copy link

commented Dec 5, 2018

❤️

@ifthenelse

This comment has been minimized.

Copy link

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

commented Dec 18, 2018

❤️

@chrisli30

This comment has been minimized.

Copy link

commented Dec 24, 2018

Thank you!

@sashangty

This comment has been minimized.

Copy link

commented Dec 28, 2018

Thank you!!

@lesvauriens

This comment has been minimized.

Copy link

commented Jan 13, 2019

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

@nikilok

This comment has been minimized.

Copy link

commented Jan 17, 2019

❤️ ❤️

@eggxman

This comment has been minimized.

Copy link

commented Jan 21, 2019

❤️

@schnurbert

This comment has been minimized.

Copy link

commented Jan 24, 2019

thank you so sehr!

@MatHackDev

This comment has been minimized.

Copy link

commented Jan 29, 2019

❤️

@marco-van-zomeren

This comment has been minimized.

Copy link

commented Feb 2, 2019

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

@samholguin

This comment has been minimized.

Copy link

commented Feb 6, 2019

Nailed it

@alexisbertin

This comment has been minimized.

Copy link

commented Feb 7, 2019

❤️ Someone give that person a cookie.

@calebsyple

This comment has been minimized.

Copy link

commented Feb 8, 2019

@james2406

This comment has been minimized.

Copy link

commented Feb 18, 2019

❤️

@kloshar4o

This comment has been minimized.

Copy link

commented Feb 19, 2019

❤️

@narrowdesign

This comment has been minimized.

Copy link

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

commented Feb 22, 2019

you save my day, thank you sooo much ❤️

@artsmolin

This comment has been minimized.

Copy link

commented Feb 25, 2019

❤️

@kogal

This comment has been minimized.

Copy link

commented Feb 28, 2019

Thank you!

@xApep

This comment has been minimized.

Copy link

commented Feb 28, 2019

❤️

@antonramha

This comment has been minimized.

Copy link

commented Mar 4, 2019

thank you <3

@simeyla

This comment has been minimized.

Copy link

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

commented Mar 12, 2019

❤️

@yangyichen

This comment has been minimized.

Copy link

commented Mar 22, 2019

❤️works for me

@asafbge

This comment has been minimized.

Copy link

commented Mar 25, 2019

❤️

@deje1011

This comment has been minimized.

Copy link

commented Mar 26, 2019

Thank you!

@isNeilLin

This comment has been minimized.

Copy link

commented Apr 4, 2019

❤️

@Enigama

This comment has been minimized.

Copy link

commented Apr 12, 2019

❤️❤️❤️

@Senior-Fin

This comment has been minimized.

Copy link

commented Apr 18, 2019

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

@sveta4acova

This comment has been minimized.

Copy link

commented Apr 19, 2019

❤️

@jqweryjson

This comment has been minimized.

Copy link

commented Apr 25, 2019

@❤️❤️❤️

@sg-mamedova

This comment has been minimized.

Copy link

commented Apr 26, 2019

❤️thank you!

@BroFox86

This comment has been minimized.

Copy link

commented May 1, 2019

Thank you! ❤️

@sharontrdjmn

This comment has been minimized.

Copy link

commented May 3, 2019

❤️

@RickStanley

This comment has been minimized.

Copy link

commented May 6, 2019

❤️

@lazd

This comment has been minimized.

Copy link

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

commented May 10, 2019

❤️

@vienthuong

This comment has been minimized.

Copy link

commented May 21, 2019

image

@mkeremkoc

This comment has been minimized.

Copy link

commented May 23, 2019

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

@soviac

This comment has been minimized.

Copy link

commented May 29, 2019

Perfection! Thank you!

@javierlopeza

This comment has been minimized.

Copy link

commented May 30, 2019

❤️

@sweettimes

This comment has been minimized.

Copy link

commented Jun 4, 2019

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

@titoasty

This comment has been minimized.

Copy link

commented Jun 7, 2019

❤️ is it love?

@LeonidasEsteban

This comment has been minimized.

Copy link

commented Jun 14, 2019

❤️

@likeavenus

This comment has been minimized.

Copy link

commented Jun 19, 2019

❤️

@onuro

This comment has been minimized.

Copy link

commented Jun 21, 2019

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

@zlsa

This comment has been minimized.

Copy link

commented Jun 22, 2019

❤️

@RPeraltaJr

This comment has been minimized.

Copy link

commented Jun 24, 2019

❤️

@vanthinhit310

This comment has been minimized.

Copy link

commented Jun 27, 2019

thank you very much

@vanthinhit310

This comment has been minimized.

Copy link

commented Jun 27, 2019

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

@nrwinner

This comment has been minimized.

Copy link

commented Jun 29, 2019

image

@theFreedomBanana

This comment has been minimized.

Copy link

commented Jul 1, 2019

❤️

@johnozbay

This comment has been minimized.

Copy link

commented Jul 11, 2019

❤️

@Gyanreyer

This comment has been minimized.

Copy link

commented Jul 15, 2019

❤️

@awdebruijn

This comment has been minimized.

Copy link

commented Jul 19, 2019

❤️very nice, thank you!

@dmarchuk

This comment has been minimized.

Copy link

commented Jul 24, 2019

❤️

@dbribe

This comment has been minimized.

Copy link

commented Jul 26, 2019

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

@alexzoul

This comment has been minimized.

Copy link

commented Jul 26, 2019

❤️

@Dexdot

This comment has been minimized.

Copy link

commented Aug 2, 2019

❤️

@dinopetrone

This comment has been minimized.

Copy link

commented Aug 2, 2019

<3

@ayaka209

This comment has been minimized.

Copy link

commented Aug 3, 2019

really thank you

@EminQasimov

This comment has been minimized.

Copy link

commented Aug 18, 2019

❤️

@gordonnl

This comment has been minimized.

Copy link

commented Aug 23, 2019

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

@Nitraatss

This comment has been minimized.

Copy link

commented Aug 29, 2019

❤️

@der-Lehmann

This comment has been minimized.

Copy link

commented Aug 29, 2019

Thanks a lot!

@dlp-fantasia

This comment has been minimized.

Copy link

commented Sep 4, 2019

❤️

@raymondjacobson

This comment has been minimized.

Copy link

commented Sep 4, 2019

❤️

@janko1984

This comment has been minimized.

Copy link

commented Sep 6, 2019

<3

@Rijk

This comment has been minimized.

Copy link

commented Sep 12, 2019

❤️

@axelferdinand

This comment has been minimized.

Copy link

commented Sep 13, 2019

<3

@Ciyou

This comment has been minimized.

Copy link

commented Sep 16, 2019

will-change: transform;

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

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.