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

❤️

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.