When you have a scrollable div with a border-radius the children divs eclipse or do not respect this border radius. For instance here is a fiddle showing the problem :
http://jsfiddle.net/Thatguyhampton/E9dmr/2/
.scrollable {
overflow: auto;
overflow-y: overlay;
-webkit-overflow-scrolling: touch;
-webkit-transform: translate3d(0, 0, 0);
height: 400px;
width: 200px;
background-color: blue;
border-radius : .5em;
}
.content {
height: 500px;
width: 200px;
}
.content-top {
position :absolute;
top: 0;
height: 50px;
width : 200px;
background-color: red;
}
The red area is showing sharp corners instead of the rounded ones of the parent. Is there any way around this?
.scrollable {
overflow: auto;
overflow-y: overlay;
-webkit-overflow-scrolling: touch;
-webkit-transform: translate3d(0, 0, 0);
height: 400px;
width: 200px;
background-color: blue;
border-radius : .5em;
}
.content {
height: 400px;
width: 200px;
}
.content-top {
/*position :absolute;*/
top: 0;
height: 50px;
width : 200px;
background-color: red;
}
Change this line like this DEMO :
.content-top {
position :absolute;
top: 0;
height: 50px;
width : 200px;
background-color: red;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
The red element doesn't have border-radius and go hover the scrollable radius element(the blue one). the border radius doesn't make cropping! (only border radius)
for fixing the issue: you can add the red element the border-radius to the top left corner.
.content-top {
border-top-left-radius : .5em;
}
.content-top {
/*position :absolute;*/
top: 0;
height: 50px;
width : 200px;
background-color: red;
}
Commenting out 'position: absolute' on the .content-top element fixes the problem.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.