Skip to content

Instantly share code, notes, and snippets.

@adamcbrewer

adamcbrewer/webkit-css-mask.css

Created June 25, 2013 16:04
Show Gist options
  • Save adamcbrewer/5859738 to your computer and use it in GitHub Desktop.
Save adamcbrewer/5859738 to your computer and use it in GitHub Desktop.
Download ZIP
CSS: overflow/border-radius mask bug-thingy
Raw
webkit-css-mask.css
/*
* There's a bug in Chrome/Safari using overflow:hidden with border-radius. This mask fixes it.
* Solution: http://stackoverflow.com/questions/5736503/how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera/10296258#10296258
*/
.masked {
position: absolute;
border-radius: 10px;
overflow: hidden;
/* this fixes the overflow:hidden in Chrome */
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
@eyaleizenberg
Copy link

Thank you so much @sergeylaptev and @adamcbrewer !
Both your solutions worked for me!
I came here because I had an element with border radius and elements with position sticky where were "overflowing" beyond their container.

@libid0nes
Copy link

Thank you very much, this solved my problem!
P.S. greetings from 2020

@adamcbrewer
Copy link
Author

@Libidine you're welcome! It would be amazing if this is still an issue :)

@yunyanliluo
Copy link

Thank you so much! You also saved me~ I hava tried for 3.5 hours this evening! Thanks to your solution I fixed my problem

@benjaminstary
Copy link

Great! 2022 and still relevant. 👍

@joosia
Copy link

joosia commented Apr 7, 2023

Oh yes, thank you! Such a pain in the ass. And still relevant in 2023... 😄

@marinagallardo
Copy link

Works like charm. Thanks for sharing <3

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