Skip to content

Instantly share code, notes, and snippets.

@HariantoAtWork
Forked from adamcbrewer/webkit-css-mask.css
Created March 23, 2020 02:58
Show Gist options
  • Save HariantoAtWork/e5dd892ec576369b8360e7f14703c8d3 to your computer and use it in GitHub Desktop.
Save HariantoAtWork/e5dd892ec576369b8360e7f14703c8d3 to your computer and use it in GitHub Desktop.
CSS: overflow/border-radius mask bug-thingy
/*
* 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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment