Chrome border-radius webkit bug
by Riley MacDonald, August 7, 2013

Using the Bootstrap’s Carousel I came across a weird bug, only replicating in Chrome and possibly Safari. While the browser had a width less than 767px, and the carousel did it’s default slide, the corners on the div would vanish! If the page was reloaded the corners would appear again, until the carousel did another slide. This was happening with several different carousels on the page.
CSS for my Carousel:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.rounded {
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -webkit-border-top-left-radius: 20px;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomright: 20px;
  -moz-border-radius-bottomleft: 20px;
  -moz-border-radius-topleft: 20px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-top-left-radius: 20px;
}

After extensive troubleshooting a found a reported bug with webkit.
To Fix the problem I simply implemented this:

1
2
3
.rounded {
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
Open the comment form

Leave a comment:

Comments will be reviewed before they are posted.

User Comments:

Be the first to leave a comment on this post!