-
-
Save adamcbrewer/5859738 to your computer and use it in GitHub Desktop.
/* | |
* 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); | |
} |
Thank you so much, it saved my life!
I just found another way to fix it,set the mask element as positioned and z-index greater than -1:
.masked {
position: absolute;
border-radius: 10px;
overflow: hidden;
/* z-index is the key */
z-index: 1;
}
2018 is this still an issue?
Thank you, this fixed my problem!
@RickFrom1987 This is still an issue in 2018...
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.
Thank you very much, this solved my problem!
P.S. greetings from 2020
@Libidine you're welcome! It would be amazing if this is still an issue :)
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
Great! 2022 and still relevant. 👍
Oh yes, thank you! Such a pain in the ass. And still relevant in 2023... 😄
Works like charm. Thanks for sharing <3
Also, possibly lighter, using a path rather than a black/white mask: