While doing one of frontendmentor.io's challenges, I encountered a weird artifact that happens when a nested div and its parent with different background colors, both have rounded corners which causes the background color of the parent div to bleed/show at the rounded corner:
After searching, the answer seemed to be that:
It's just an anti-aliasing issue and can't be helped.
Using
background-clip: padding-box;oroverflow: hidden;which didn't work for me.
Since I just couldn't let it go and pretend it doesn't exist, I came up with three ways to fix the issue:
1. Avoiding the problem altogether!
Instead of having a nested div, put the divs on top of each other and position them with position: absolute; This way, the parent div can have a shorter height and not be behind the rounded corners to begin with. but I like to avoid using absolute positioning as much as possible so...
2. Pushing the nested div to the bottom a little!
By moving the nested div to the bottom by a little amount like 0.1rem (using position: relative;), the anti-aliasing issue is fixed and no color bleed happens. but it messes up the spacing by 0.1rem so can't have that...
3. Removing the background color of the parent div from the affected area
By applying the background color only to the top part of the parent div we can solve this issue without moving stuff around. the best way to do it is using linear-gradient. for example linear-gradient(#color 0%, #color 50%, transparent 50%, transparent 100%); will apply the background color only to the top half of the parent div.
Live example
color bleed : https://colorbleed.netlify.app/
color bleed fixed using the 3rd method : https://colorbleedfix.netlify.app/
You can check the source of this challenge on my GitHub