CODEWITHSUNDEEP
htmlcssjquery-uijquery-ui-progressbar
Sora
Sora

Reputation: 73

Background-clip not working in my code. (Border-Radius/Background bleeding issue)

I'm trying to style the default progressbar skin of jquery-ui. Unfortunately I've discovered an issue that is known as "background bleeding". Apparently the solution for this problem is to use:

-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;

However it does not seem to work for me, no matter where I put it. :(

Image of my background bleeding issue (zoomed)

enter image description here

Source: 

$(function() {
    var myProgressBar = $("#myProgressBar");
    myProgressBar.progressbar({
                value: 50
    });
});
#myProgressBar {
    width: 580px;
    height: 92px;
    border: none;
    /* black background */
    background-color: black;
    background-image: linear-gradient(rgba(255, 255, 255, 0.25) 50%, transparent 50%, transparent);
}

#myProgressBar .ui-widget-header {
    /* orange foreground */
    background-color: orange;
    background-image: linear-gradient(rgba(255, 255, 255, 0.2) 50%, transparent 50%, transparent);
}
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

<div id="myProgressBar"></div>

Upvotes: 0

Views: 359

Answers (1)

Sora
Sora

Reputation: 73

Here is a workaround: I set a smaller border-radius for the inner rectangle (orange bar), to hide the blurry leaking part of the parents (black background) rounded border. I'll mark this question as solved as the workaround is good enough for my purpose. Sadly this issue remains a bug/flaw in CSS.

Edit: Alright, have to wait 2 days before I can actually close it. Please don't delete it again.

Upvotes: 0

Related Questions